CSS: Away from CSS

In this article, we’ll explain how to abstract CSS away from itself when writing CSS. CSS, as a style sheet language, controls the presentation and layout of HTML pages. However, CSS itself has some shortcomings, such as the complexity of selectors, the redundancy of cascading style sheets, and the high degree of style coupling. To improve the maintainability and reusability of CSS code, we need to abstract CSS and encapsulate its functionality into independent modules.

Read more: CSS Tutorial

What is CSS Abstraction?

CSS abstraction encapsulates CSS functionality into independent modules for reuse across multiple projects or pages, improving code maintainability. Through CSS abstraction, we can separate the definition and usage of stylesheets, making stylesheet code more readable, reusable, and extensible.

How to implement CSS abstraction

1. Using a Preprocessor

Using a CSS preprocessor is a common way to abstract CSS. Preprocessors like Sass, Less, and Stylus provide programming language-like features like variables, nested rules, and mixins, making CSS code more readable and maintainable.

// Example: Using Sass variables and nested rules
<span class="katex math inline">primaryColor: #ff0000;

.button {
background-color:</span>primaryColor;
color: #ffffff;

&:hover {
background-color: darken($primaryColor, 10%);
}
}

2. Using a CSS Framework

Using a CSS framework is another way to abstract CSS. CSS frameworks like Bootstrap and Foundation provide a rich set of styles and components for quickly building interfaces. By using a CSS framework, we can separate style definition from usage, improving code maintainability and reusability.

<!-- Example: Using Bootstrap button styles -->
<button class="btn btn-primary">Primary Button</button>

3. Use Naming Conventions

Using naming conventions is an important step in achieving CSS abstraction. By using consistent naming conventions, we can make our CSS code easier to understand and maintain. Common naming conventions include BEM (Block Element Modifier) ​​and OOCSS (Object Oriented CSS).

<!-- Example: Using BEM Naming Conventions -->
<div class="button button--primary">Primary Button</div>

4. Using Tools and Techniques

In addition to preprocessors and CSS frameworks, there are several tools and techniques that can help achieve CSS abstraction. For example:

• CSS Modules: By using CSS module tools such as CSS Modules and styled-components, you can bundle CSS styles and components together, making style definitions and usage more independent and reusable.

• CSS-in-JS: By using techniques such as styled-components and Emotion that write CSS styles directly in JavaScript code, you can achieve higher-level CSS abstractions, making style definitions and usage more flexible and maintainable.

Benefits of CSS Abstraction

Abstracting CSS has the following advantages:

• Maintainability: Abstracted CSS code is clearer, more structured, and easier to understand and modify.

• Reusability: Abstracted CSS code can be reused across multiple projects or pages, reducing the need for rewriting code.

• Extensibility: Because abstracted CSS code has good modularity, it is easy to extend and modify, allowing for quick response to changing requirements.

Summary

By using preprocessors, CSS frameworks, naming conventions, and tooling, we can achieve CSS abstraction and improve the maintainability and reusability of CSS code. CSS abstraction not only makes style code more elegant and easier to maintain, but also improves development efficiency and code quality. Therefore, when developing a project, we should stay away from CSS itself as much as possible and adopt an abstract approach to writing CSS code.