CSS Hell

Collection of common CSS mistakes, and how to fix them

Convenient CSS naming conventions

Posted on by cat_a_flame

I often run into the problem where I see the same class name being reused on different parts and context of the website, but when 1 out of the 3 properties don't match with the design, developers just use inline styling to override the desired rule.

Bad example

.primary-text {
  color: #000;
  font-family: "Open Sans";
  line-height: 1.2;
}
 <h1 class="primary-text">Primary title</h1>
 <h2 class="primary-text" style="color: #333">Subtitle</h2>
 <!-- Changing the font color inline because I want a different color for the subtitle-->

What is the problem and how to fix it

  • Using inline styling leads to hard maintenance and code readability. The best way is to separate the view, styling and JavaScript from each other.
  • Class names should reflect what are they styling, like, in my example, you can tell from the CSS that the .heading-main is styling the main heading.
  • If you work on a website with more people and don't have a naming convention, it has a risk of creating a class with the same name, and that can cause conflicts on the design, most likely if you are working with reuseable components (the most common class name I often see is .title).
  • There are several methodologies for naming. The most popular one is BEM, but you can choose by your liking or just come up with a new one which suits the project. The most important is to follow the naming convention all the time.

Good example

 .heading-main {
   color: #000;
   font-family: "Open Sans";
   line-height: 1.2;
 }

 .heading-subtitle {
   color: #333;
   font-family: "Open Sans";
   line-height: 1.2;
 }

More advanced good example

 :root {
   --heading-font-family: "Open Sans";
   --heading-line-height: 1.2;
 }

 .heading-main {
   color: #000;
   font-family: var(--heading-font-family);
   line-height: var(--heading-line-height);
 }

 .heading-subtitle {
   color: #333;
   font-family: var(--heading-font-family);
   line-height: var(--heading-line-height);
 }

Resources