Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

Naming classes (CSS)

Some ideas/patterns for naming your CSS classes

Some general tips

  • Use snake-case
  • Name classes by feature (example: .page-title) instead of style (eample: .title-blue)
    • One reason: if name your class by style and you want to change something about the style, you would need to change the class name and change the HTML accordingly everywhere it's used
    • Note that CSS frameworks often have utility classes that are named by style (.visibility-hidden, .text-center, ...). There are even frameworks like Tailwind CSS that pretty much rely completely on these kinds of utility classes.
  • Don't go too specific: instead of creating very specifc classes (or selector) that have a lot of duplication between them, try to encapsulate different parts of the behavior you want into classes that you can then combine
    • Example: instead of .main-article-box or article.main p.box, consider going for .box which you can apply in different places, potentially combined with other classes

Object Oriented CSS

  • Idea: separate CSS into reusable "objects" that can be used anywhere you need
  • The way people use CSS today is heavily influenced by this approach

Example CSS not using OOCSS approach:

.comment {
display: grid;
grid-template-columns: 1fr 3fr;
}
.comment img {
border: 1px solid grey;
}
.comment .content {
font-size: .8rem;
}
.list-item {
display: grid;
grid-template-columns: 1fr 3fr;
border-bottom: 1px solid grey;
}
.list-item .content {
font-size: .8rem;
}

Example CSS using OOCSS approach:

.media {
display: grid;
grid-template-columns: 1fr 3fr;
}
.media .content {
font-size: .8rem;
}
.comment img {
border: 1px solid grey;
}
.list-item {
border-bottom: 1px solid grey;
}

Example HTML for comment:

<div class="media comment">
<img />
<div class="content"></div>
</div>

Example HTML for list item:

<ul>
<li class="media list-item">
<img />
<div class="content"></div>
</li>
</ul>

Block Element Modifier (BEM)

  • Naming standard for CSS classes
  • Terminology:
    • Block: button, menu, logo, ...
    • Element: something in the block
    • Modifier: a flag that changes style or behavior
  • Class names: block__element--modifier
  • Typical use case: large web projects
  • Can be overkill for smaller projects or for projects that have a way of making CSS more modular by making specific pieces of CSS only apply to specific parts of the website (example: Angular component styles )

BEM example (from Get BEM ):

<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

Resources