CSS Architecture and the Three Pillars of Maintainable CSS

Key Points

• Maintainable CSS architecture is essential to avoid difficult-to-maintain style sheets, as difficult-to-maintain style sheets can have unexpected side effects and require a thorough rewrite of the application's CSS.
• Three basic concepts or pillars form the cornerstone of CSS architecture design: building blocks (such as Sass, efficient CSS selectors, BEM syntax, etc.), orchestrating these building blocks into reliable and maintainable hierarchical CSS, and Application of software engineering principles.
• Software engineering principles such as separation of concerns and SOLID principles can be applied to CSS to ensure that code models reality in a maintainable way. This includes applying principles such as DRY (don't repeat yourself) and WET (we like to type) to improve the maintainability of the code.
• Trying to combine in CSS, such as using mixin and inheritance, can provide a stronger structure and reduce the need to define classes for each combination, enabling easier maintenance CSS.

Elements of CSS architecture

If you have ever inherited a bad CSS and are obliged to maintain it, you may have some sympathy for others who will maintain your code in the future. In extreme cases, developers have no choice but to completely rewrite the CSS of the application. These extremes occur when each patch introduces multiple unexpected side effects. Once this is reached, your stylesheets become hard to maintain.

You can now avoid causing difficulties to your future self by making architecturally reliable decisions. This is why it is very important to learn how to build a maintainable CSS architecture in practice.

If you don't want to be the one who passes bad code, you might want to know how to create a maintainable CSS from scratch. Where will you start? Let's look at the elements of CSS architecture that are worth considering when building a perfect project.

Three pillars that can maintain CSS

Watch the "Becoming a CSS Hero of the Office: CSS Architecture" course to learn to create structured, maintainable and scalable CSS! Video Play Icon View this course View this course

When designing the CSS architecture of a software system, three concepts are worth considering. These concepts are very basic and we can think of them as pillars that support the structure of a building. We need these three pillars to keep our CSS under the test of time and not collapse into difficult-to-maintain chaos.

The first pillar defines the building blocks of the CSS architecture. These building blocks contain a wide variety of solutions and tools, such as using Sass, writing efficient CSS selectors, block-element-modifier (BEM) syntax, using classes instead of ID attributes, and using relatives where appropriate unit.

While this view can significantly improve the quality of your CSS code, we need a higher level of organization to systematically systematize our work. Therefore, we need a second pillar that focuses on the orchestration of building blocks to build reliable, maintainable hierarchical CSS. Think of this layer as the skeleton of the CSS architecture. If you are interested in two ready-made CSS architectures, you can further study ITCSS and SMACSS.

Unfortunately, the organized use of building blocks and frameworks or CSS architectures won't let you write rock-solid, easy-to-maintain CSS. By applying software engineering principles, our code becomes reliable. This is the third pillar in writing maintainable CSS.

Apply software engineering principles to CSS

There are many different principles for designing long-lasting software.

These principles provide a purpose for using your CSS tools and solutions by ensuring that your CSS code models reality in a maintainable way. Without these principles, using any CSS architecture is mostly just a ritual. If you don't follow software engineering principles to write CSS, once the code size becomes difficult to maintain, it often crashes overwhelmed and collapses.

If you are a software engineer with a lot of experience in certain programming languages, you may find it very surprising to apply these principles to declarative languages ​​like CSS. However, in practice, CSS has become a mature language, similar to other languages, structure is thoughtful about the required code. Let's examine the practical application of some of the main principles.

Separation of concerns

Separation of concern is a software design principle that is responsible for defining clear separation responsibilities in software solutions. The most obvious application to CSS is the separation between classes for styles and classes for functionality. Style classes should not appear in JavaScript code, and functionality-related classes should not appear in stylesheets.

SOLID Principle

Robert C. Martin defines five SOLID principles. Some of these principles also apply to CSS and other programming languages.

In my CSS Architecture course, you will find many different applications detailing how to use these SOLID principles in the context of CSS code, including the single responsibility principle and the opening and closing principle.

In the style sheet hierarchy, we apply the single responsibility principle. For example, a layer in the ITCSS architecture contains reset or normalization procedures. Tag styles are built on the normalization program, and component styles are built on the tag styles. Each level has a single, well-defined responsibility.

The most famous example of applying software engineering principles to CSS code is the comparison between DRY and WET CSS. DRY stands for “Don’t repeat yourself”, while WET stands for “We love to type.”

Make code DRY more maintainable because whenever you change the DRY code, you only need to do the change in one place and you can be highly sure that you don't have to search the rest of the CSS code base for other appearances of the same code Condition.

When your CSS is a WET, you can DRY it by identifying the common part of the code and abstracting this common function into the base class (or mixin if using a preprocessor).

Using base classes and subclasses in code is called inheritance, which is executed using @extend in Sass. When we use mixin or @mixin directive using Sass terminology, we use combinations. Inheritance, composition, and the use of Sass constants are powerful tools for performing abstractions.

Try combining in CSS

Let's look at a practical example. Suppose there are four types of rectangles in our code base. A universal rectangle, a rounded rectangle, a green rectangle and a rounded green rectangle.

We can use the BEM naming convention to mark each rectangular component as follows:

<code><div class="rectangle"></div>
<div class="rectangle--rounded"></div>
<div class="rectangle--green"></div>
<div class="rectangle--rounded--green"></div></code>

Let's define these four classes in Sass using inheritance. We start with the base class of .rectangle and create modifier classes that use Sass @extend to inherit the style of the base class:

<code>.rectangle {    
  width: 200px;  
  height: 100px;  
  margin: 20px;  
  padding: 20px;  
  display: inline-block;  
  border: 1px solid black;
}
.rectangle--rounded {  
  @extend .rectangle;
  border-radius: 20px;
}

.rectangle--green {  
@extend .rectangle; 
  background-color: green;
}

.rectangle--rounded--green {  
  @extend .rectangle--rounded;  
  @extend .rectangle--green;
}</code>

The structure is clear, and we did not repeat ourselves in the modified class. However, creating a hierarchy of five modifiers will result in 31 class definitions, most of which are nothing more than a collection of @extend directives.

The combination provides us with a stronger structure. To create a completely flexible structure, we only need a common rectangular class and two mixins:

<code>@mixin rounded {  
  border-radius: 20px;  
}

@mixin green { 
  background-color: green;
}</code>

Suppose we have a special feature box.

<code><div class="feature-box"></div></code>

If the feature box is rounded, but not green, we just need to expand the rectangle class and include a mixin that makes the rectangle become rounded:

<code>.my-rectangle {  
  @extend .rectangle;  
  @include rounded;  
}</code>

Structures are flexible without defining classes for each combination.

Towards a better CSS architecture

We can conclude that the software engineering principles apply to CSS and any other programming language. These principles fall between two levels: the micro level of the CSS building blocks and the macro level of these building blocks. Therefore, it is beneficial to learn how to apply these principles in practice when creating maintainable CSS.

To help explain and demonstrate the practical application of these principles, I created a course on rock-solid CSS architecture; CSS architecture principles

In this course, we will explore the three pillars of CSS architecture and emphasize the principles of software engineering. Not only will you learn these principles theoretically, but you will also have the opportunity to use them in many practical examples.

For example, we will collect a large number of blog posts and find out why the provided CSS code is difficult to maintain. We will gradually complete the process of refactoring CSS, applying the principles briefly introduced in this article and in-depth in the course video.

I have developed a section specifically to put the three pillars of the CSS architecture into practice by creating a small component library using ITCSS architecture and Sass. If you are interested in learning more about CSS architecture, please sign up for the course and meet us in the course!

Frequently Asked Questions about CSS Architecture and Maintainable CSS

What is the importance of CSS architecture in web development?

CSS architecture plays a crucial role in web development. It provides a structured way to write CSS code, making the code easier to understand, maintain and extend. With a well-defined CSS architecture, developers can avoid issues such as specific conflicts, naming conflicts, and code duplication. It also facilitates code reuse and reduces the time and effort required to build a web page.

How does the OOCSS method promote maintainable CSS?

Object-oriented CSS (OOCSS) is a way to promote code reuse and faster and more efficient stylesheets. It encourages developers to think of CSS as an object system, each with its own properties and behaviors. OOCSS makes it easier to create scalable and maintainable CSS by separating structure from appearance and container from content.

What is the role of the BEM method in CSS architecture?

Blocks, elements, modifiers (BEM) are naming conventions used for classes in HTML and CSS. It provides a clear, strict structure that makes the code easier to read and understand. BEM approaches help create robust and scalable CSS architectures by reducing the opportunities for naming and specific conflicts.

How does the SMACSS method help create maintainable CSS?

Scalable and Modular Architecture (SMACSS) for CSS is a style guide that encourages modularity and scalability. It divides CSS rules into five types: foundation, layout, module, state, and theme, each with its specific purpose. This classification helps organize CSS code, making it easier to maintain and scale.

What is the significance of the ITCSS method in CSS architecture?

Inverted Triangle CSS (ITCSS) is a way to help manage large-scale CSS. It organizes CSS into several layers, each layer having its specific role. This hierarchical structure ensures that the most general style is loaded first and then more specific styles are loaded, thus reducing the chances of specific problems.

How does CSS variable promote maintainable CSS?

CSS variables (also known as CSS custom properties) allow developers to define reusable values. They can significantly improve maintainability by reducing code duplication and making global changes easier. For example, defining a color as a variable allows you to reuse it throughout the stylesheet and change it in one place.

What is the role of CSS preprocessors in maintainable CSS?

CSS preprocessors like Sass and Less provide features such as variables, nesting, mixins, and functions that are not available in regular CSS. These features can greatly enhance the maintainability and readability of your code, making it easier to write complex CSS.

How does component-based architecture promote maintainable CSS?

Component-based architecture facilitates the creation of reusable, independent components, each with its own HTML, CSS, and JavaScript. This approach makes the code more modular and easier to maintain, as changes to one component do not affect others.

What is the importance of style guides in CSS architecture?

Style Guide provides a set of CSS writing standards. It ensures consistency in the code base and makes the code easier to read and maintain. Style guides can include naming conventions, formatting rules, and best practices.

How does the CSS lint tool promote maintainable CSS?

CSS lint tools like Stylelint can help execute coding standards and capture potential issues before they become problems. They can automatically fix certain issues and provide advice on others, thereby improving code quality and maintainability.

The above is the detailed content of CSS Architecture and the Three Pillars of Maintainable CSS. For more information, please follow other related articles on the PHP Chinese website!