My 2¢ on scoping in CSS

Problems

1 - Authoring CSS

2 - CMS plugin

Adhoc solution approaches

  • Change the order of declaration, move things down in the CSS to override values that have been set before.
  • Use higher a higher specificity, like `#foobar ul li` or `div:is(:not(.foobar))`
  • Use the `!important` rule to override stuff.

My solution approaches

1 - A global parent selector

// .t is the global parent class, can be anything
// for Teutonic CSS in my case
.t {
@import "includes/_styles.scss";
@import "includes/_more-styles.scss";
}
.t .topnav { … }
.t .footer { … }
<div class="t">
<!-- The plugin will still inherit styles -->
<div class="plugin"></div>
</div>
<div class="t"></div>
<div class="plugin"></div>
<div class="t"></div>

2 - Unique class names

.t {
&-button { … }
}

Generated CSS class names

Obscure class names in Google Drive

Unique CSS class naming conventions

Don’t style any HTML elements directly

Bootstrap forms

Bulma forms

<textarea class=”textarea”></textarea>
<input type=”checkbox” class=”checkbox”>

Pure CSS forms

BEM, OOCSS, ACSS, SMACSS, SUITCSS and company

<button class="btn btn--secondary"></button>

CSS utility classes

<!-- 1. Semantic CSS class name: What is it? -->
<h1 class="section-heading">Hello</h1>
<!-- 2. Utility class CSS name: How does it look like? -->
<h1 class="b-b-xs p-b-xs">Hello<h1>

The future ahead

<style scoped> to the rescue?

<div>
<style scoped>p { color: red }</style>
<p>Look ma, I'm red.</p>
</div>
<p>Look ma, I'm not red</p>

Shadow DOM ante portas!

<!-- Silly example -->
<flag-icon country="de"></flag-icon>
<style>
flag-icon[country=de]:before { content: '🇩🇪' }
</style>

Conclusion

.container {
.wrapper {
.main {
.nav {
ul {
li {
border: 1px solid red;
}
}
}
}
}
}

Further readings

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store