CSS-Tricks does a great job of explaining the basic CSS terminology here.
We use stylelint with our custom config to ensure that we write clean and maintanable code.
We use BEM or "Block-Element-Modifier" to help us build reusable, scalable components and to keep the selector specificity low. But we are using a more atomic approach to BEM that looks like this .block__element -modifier to avoid long class names when combinding multiple modifiers.
Useful reading
- http://getbem.com/introduction/
- https://css-tricks.com/bem-101/
- https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
This will only create unnecessary selector specificity.
camelCasing will provide a better grouping of class names and make them easier to read and mentally process.
🚫 Don't
.header-nav__list-item.-is-active {}✅ Do
.headerNav__listItem.-isActive {}Note: the only exception of this rule are the JavaScript hooks.
If you need to chain element selectors it probably means that you need to convert an element to a block.
🚫 Don't
.nav__list__item {}✅ Do
.nav__item {}
/* or */
.navItem {}Avoid binding to the same class in your CSS and JavaScript. Using the same class will make it harder to refactor and reuse functionality. We use a specific JavaScript class prefixed with .js- instead.
<button class="button js-open-menu">Open menu</button>