CSS Architecture

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

Edit Copy Hide

.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 */
}

Edit Copy Hide

<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.

Edit Copy Hide

/* 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');

Edit Copy Hide

<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:

• Settings : Contains global settings, such as typography and color variables.
• Tools : Includes mixins and utility classes for repetitive tasks and common styles.
• Generic : Resets and baseline styles for HTML elements.
• Elements : Styles for basic HTML elements like buttons and forms.
• Objects : Reusable design patterns like grids and cards.
• Components : Styles specific to components like the header and footer.
• Trumps : Overrides and specific styles that take precedence over other styles.

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.