start learning
Image 1

CSS Architecture

CSS architecture refers to the systematic organization and structuring of CSS code to enhance maintainability, scalability, and collaboration in web development projects. It involves establishing a set of rules and guidelines for naming conventions, file structure, componentization, and code organization .

Here's an example of CSS architecture, along with clarification:

BEM (Block Element Modifier)


.card {
  border: 1px solid #ccc; /* Add a border with 1px width, solid style, and a light gray color */
  padding: 20px; /* Add 20px of padding inside the card */
}

.card__title {
  font-size: 20px; /* Set the font size of the title to 20px */
  color: #333; /* Set the text color of the title to a dark gray color */
}

.card__text {
  font-size: 16px; /* Set the font size of the text to 16px */
  color: #666; /* Set the text color of the text to a medium gray color */
}

.card__button {
  padding: 8px 16px; /* Add padding of 8px on top and bottom, and 16px on left and right */
  border-radius: 4px; /* Add a border-radius of 4px to round the corners */
}

.card__button--primary {
  background-color: blue; /* Set the background color of the primary button to blue */
  color: white; /* Set the text color of the primary button to white */
}

<div class="card">
  <h2 class="card__title">Card Title</h2>
  <p class="card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <button class="card__button card__button--primary">Read More</button>
</div>

In this example, the BEM (Block Element Modifier) methodology is used for CSS architecture. The .card class represents the main block, and its child elements are represented by modifier classes such as .card__title, .card__text, and .card__button. The modifier class .card__button--primary indicates a specific variation of the button component.

This architecture provides a clear naming convention and structure, making it easier to understand and maintain the code. Each component is encapsulated within its block, ensuring that styles do not interfere with other parts of the page. It promotes reusability, as blocks and elements can be used in different contexts without conflicting styles.


ITCSS (Inverted Triangle CSS) approach


/* Settings */
@import url('typography.css');
@import url('colors.css');

/* Tools */
@import url('mixins.css');
@import url('utilities.css');

/* Generic */
@import url('reset.css');
@import url('base.css');

/* Elements */
@import url('buttons.css');
@import url('forms.css');

/* Objects */
@import url('grid.css');
@import url('card.css');

/* Components */
@import url('header.css');
@import url('footer.css');

/* Trumps */
@import url('overrides.css');

<header class="header">
  <nav class="header__nav">
    <ul class="header__menu">
      <li class="header__menu-item"><a href="#">Home</a></li>
      <li class="header__menu-item"><a href="#">About</a></li>
      <li class="header__menu-item"><a href="#">Services</a></li>
      <li class="header__menu-item"><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

In this example, the ITCSS approach is used to structure CSS code. The CSS files are imported in a specific order based on their importance and specificity. Here's a breakdown of the sections:

This architecture promotes a modular and scalable approach to CSS development. It separates concerns and provides a logical structure for organizing stylesheets. It ensures that styles are defined consistently, reusable, and easily maintained.

Note: The file import statements (@import url(...)) in the CSS example can be replaced with the appropriate syntax used in CSS preprocessors like Sass or Less, depending on the preprocessor you're using.


By following a CSS architecture approach like ITCSS, developers can create a more organized and manageable codebase, enabling collaboration and maintainability in larger projects.