CSS Best Practices: Essential Tips for Writing Clean and Maintainable Code

Aug 2, 2024 5 min read

Introduction

Cascading style sheets (CSS) is a powerful language for creating visually appealing and responsive websites. Writing clean and maintainable CSS code is crucial for efficient development, collaboration and long-term maintenance of web projects. In this post, we will explore essential CSS best practices that I have learnt through out my career.

As you take on larger projects, one of the first challenges you’ll encounter is the CSS code growing to thousands of lines, making it difficult to navigate. To improve code maintainability, it’s essential to modularize and follow certain techniques right from the get go.

Organization & Modularity

CSS modularization is a practice used in web development to break down large, monolithic CSS files into smaller, more manageable, and reusable pieces or modules. This approach makes it easier to maintain, update, and scale your CSS codebase in larger projects.

Example:

css/
|-- base/
|   |-- _reset.scss
|   |-- _typography.scss
|
|-- components/
|   |-- _buttons.scss
|   |-- _cards.scss
|
|-- layout/
|   |-- _header.scss
|   |-- _footer.scss
|
|-- main.scss

// main.scss
@import 'base/reset';
@import 'base/typography';
@import 'components/buttons';
@import 'components/cards';
@import 'layout/header';
@import 'layout/footer';

If you’ve noticed that the file extensions are .scss rather than the usual .css, it’s because we are using a preprocessor. This allows us to leverage additional functionalities not available in standard CSS.

CSS Preprocessors

CSS preprocessors are scripting languages that extend the default capabilities of CSS, allowing developers to write CSS more efficiently. They introduce features that are not available in standard CSS, such as variables, nested rules, mixins, inheritance and functions. The preprocessor code is then compiled into regular CSS that can be interpreted by the web browser.

The most commonly used preprocessors, as of the time of writing this post, are SASS, SCSS, LESS, and Stylus.

Naming Convention

These are guidelines that help developers write clear, maintainable, and scalable CSS by establishing a consistent approach to naming classes, IDs, and other selectors. Adopting a naming convention improves readability and facilitates team collaboration. The most popular CSS naming conventions are:

BEM (Block Element Modifier)

It’s a methodology that aims to make CSS more maintainable by organizing the naming of CSS classes in a specific pattern.

Example:

<div class="menu">
  <ul class="menu__list">
    <li class="menu__item menu__item--active">Home</li>
    <li class="menu__item">About</li>
  </ul>
</div>

.menu{/* Block styles*/}
.menu__list{/* Element styles*/}
.menu__item{/*Element styles*/}
.menu__item--active{/*Modifier styles*/}

Here,

  • Block represent a standalone component (e.g., header, button, menu)
  • Element represents part of the block that performs a certain function (e.g., header__logo, menu__list)
  • Modifier is a flag on Block or Element to change its appearance or behavior (e.g., button--primary, menu__item--active)

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS categorizes CSS rules into different types to create a modular and scalable architecture:

  • Base: Default styles like resets.
  • Layout: Styles for major layout components.
  • Module: Styles for reusable components.
  • State: Styles for different states of elements (e.g., hidden, active).
  • Theme: Styles for theming the appearance.
/* Base */
body, h1, p { margin: 0; padding: 0; }

/* Layout */
.header { }

/* Module */
.button { }
.card { }

/* State */
.is-hidden { display: none; }
.is-active { }

/* Theme */
.theme-dark { }

OOCSS (Object-Oriented CSS)

OOCSS focuses on creating reusable, modular components by separating structure and skin:

  • Structure: Defines the layout and positioning.
  • Skin: Defines visual styles like colors and fonts.
<div class="card card--primary">
  <h2 class="card__title">Title</h2>
  <p class="card__content">Content</p>
</div>

/* Structure */
.card { padding: 20px; border: 1px solid #ccc; }
.card__title { font-size: 1.5em; }
.card__content { }

/* Skin */
.card--primary { background-color: blue; color: white; }

ITCSS (Inverted Triangle CSS)

ITCSS is a scalable and maintainable architecture that arranges stylesheets in a specific order:

  • Settings: Global variables, config switches.
  • Tools: Mixins and functions.
  • Generic: Reset and Normalize styles.
  • Elements: Styling for bare HTML elements.
  • Objects: Reusable, non-cosmetic design patterns.
  • Components: Specific UI components.
  • Trumps: Overrides and helper classes.
/* 1. Settings */
$primary-color: #333;

/* 2. Tools */
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 3. Generic */
* { margin: 0; padding: 0; }

/* 4. Elements */
h1 { font-size: 2em; }

/* 5. Objects */
.container { max-width: 1200px; margin: 0 auto; }

/* 6. Components */
.button { }

/* 7. Trumps */
.hidden { display: none !important; }

Atomic CSS

Atomic CSS promotes writing small, single-purpose classes, each responsible for a single style rule.

<div class="bg-blue color-white p-20 m-10">
  <h2 class="f-1-5em">Title</h2>
  <p class="m-0">Content</p>
</div>

.bg-blue { background-color: blue; }
.color-white { color: white; }
.p-20 { padding: 20px; }
.m-10 { margin: 10px; }
.f-1-5em { font-size: 1.5em; }
.m-0 { margin: 0; }

Each naming convention has its own strengths and is suitable for different types of projects and teams. The key is to choose a convention that fits your project’s needs and stick to it consistently to maintain clear and organized CSS.

Benefits of CSS Modularization

  • Improved Readability: Smaller, focused modules are easier to read and understand.
  • Faster Development: Modular CSS speeds up the development process by making styles easier to locate and update.
  • Reduced Conflicts: Isolating styles in modules helps prevent style conflicts and unintended overrides.
  • Enhanced Collaboration: Multiple developers can work on different modules simultaneously without any hassle.
  • Easier Debugging: When issues arise, modular CSS makes it easier to pinpoint the source of the problem.

Conclusion

By following these best practices, you can create CSS that is clean, efficient, and maintainable, leading to better performance and easier collaboration on web development projects.

Tags

CSS SCSS HTML