Mon, Nov 13, 2017
CSS and the Global scope
This is then fed into CSS, where apparently it’s a bad idea there too. The problem with this thought process is that CSS isn’t a programming language. CSS is a language of declaration, it is quite literally just telling the browser “make these elements red and underlined”. So, it doesn’t strike me as particularly wise to bluntly apply the same principles we use for programming to CSS, without paying respect to the fact that on a fundamental level they behave in a completely different manner. With CSS, I feel that styles should be global unless they are specific to the component, in which case a simple naming methodology such as BEM seems to serve the purpose well enough.
When I first started using BEM, I was guilty of doing things such as
.footer__logo when the reality is both logo’s were styled exactly the same and I was repeating myself for the sake of a methodology. This is a prime example of understanding scoping in CSS - scope when styles are specific to the component - but when they’re used elsewhere, they should be global.
The problem with this approach is, much like my first dealings with BEM class names, you’re going to end up with very “wet” (i.e. not DRY!) CSS where you are endlessly repeating the same styles.
I’m aware that the techniques used to achieve CSS in JS do not force all styles to be scoped to a component, but when advocacy against the use of global scope is cited as a primary reason for CSS in JS, I’m worried where that leads us and that many developers will completely ignore the global scope in CSS.