I have stumbled upon a “stylesheet structure” called RSCSS (Reasonable System for CSS), which is basically a set of rules regarding how to write highly maintainable CSS. Meanwhile I like the extra rules, the naming convention is pretty much BEM, only with different syntax.

Single word selectors or selectors with only a hyphen indeed do look better, however BEM has been so popular, I did some research on what possible effects differences may cause and I found something interesting.

As Jens K. highlights, browsers read right-to-left; they parse the selector first and then its relations, meaning e.g.: when a class name form is being parsed, the browser will look for all the form elements within the document, and only then will apply the changes.

So instead, if we use a less generic class name, such as login-box__form the browser likely will find significantly less results to deal with (= decide whether apply changes or not).

Despite the fact that easily readable class names do look better, unique class names result better performance.

Gábor Pintér Web developer, hobby blogger, decent guy