If you're familiar with CSS and Sass, you've likely come across different approaches people take to write their class names.
Here's an approach I've been using that's been working well for me.
BEM (block, element, modifier) is a widely adopted front-end naming methodology.
Commonly BEM uses double dashes and double underscores. The reason being, you can then use single dashes as well, whilst double distinguish the differences between the block, element or modifier. Here's an example:
Standard 'BEM' way
My BEM Approach
Especially with the last example, I find it hard to process when scanning quickly. Here's how I do things. I use camelCase for my block, element and modifiers, then use a single underscore or dash to split things up:
Read on to learn how I name CSS classes using consistent naming conventions.
Browse by category:
- case study4
- chrome dev tools4
- clojure overtone2
- dev tips1
- raspberry pi1
- responsive web design1
- web development2