SMACSS: A best practice about CSS-Overview_html/css_WEB-ITnose

What is SMACSS?

SMACSS (pronounced "smacks") is the abbreviation of Scalable and Modular Architecture for CSS. As the name suggests, SMACSS is an extensible, modular CSS architecture. It is not a CSS framework, but a guide, a best practice for CSS design. SMACSS aims to standardize a unified CSS development method so that developers can better develop and maintain CSS code.

Why SMACSS?

For software systems, no matter what language or programming ideas are used, there are several requirements that are always the same: reusable, scalable, and maintainable. For small projects, the pain points are not obvious. However, as the scale of the project increases, the pain points of difficulty in reuse, expansion, and maintenance are becoming more and more amplified. At this time, a good architecture is crucial. SMACSS can help us design and develop CSS in a better model, so as to achieve the purpose of being reproducible, scalable, and maintainable. SMACSS is suitable for projects of any size without fear of over-engineering.

SMACSS Best Practices

There is currently a design idea that solves the problems of reusability, scalability, and maintainability well, and that is object-oriented design (OO). Many designs are nothing more than implementing OO programming ideas, and SMACSS is no exception. Here is a brief introduction to the main contents of SMACSS:

1. Classification CSS rules

Any project requires good organization. Adding CSS rules to files without planning and organization will seriously hinder later development and maintenance.

The core of SMACSS is to classify CSS rules. Through classification, we can classify CSS rules into different modes and define better practices for each mode. SMACSS divides CSS rules into the following 5 categories:

1. Base
2. Layout
3. Module
4. State
5. Theme

We often do not distinguish the categories of CSS rules and write all CSS rules together. This behavior of SMACSS is actually what OO calls encapsulation and modularization. The benefits of encapsulation are obvious. SMACSS proposes best practices for each category.

　Base rules refer to the default CSS rules, such as some CSS such as Normalize or Reset. Essentially, base style means that no matter whether the element is on the page or not, it should look like this.

1 html, body, form { margin: 0; padding: 0; }2 input[type=text] { border: 1px solid #999; }3 a { color: #039; }4 a:hover { color: #03C; }

　Layout rules are responsible for the layout of the page. Layout can contain one or more modules.

　Module rules are modular, reusable CSS rules. They can be menus, pop-ups, product lists, etc.

　State rule describes a special state of layouts or modules, hidden or expanded? Active or inactive?

　Theme rulesAs the name suggests, it refers to the look and feel of all layouts and modules. Of course, many websites do not need Theme.css to provide more website themes.

2. Standardized naming rules

Through naming rules, we can quickly know what category a CSS rule belongs to. In large projects, CSS rules are often subdivided into many files. In this case, naming rules can help us quickly find the corresponding files.

For layout rules, generally use l- or layout- as the prefix. For state rules, generally use is- as the prefix, such as .is-hidden or .is-collapsed. Modules rules are the most important type of CSS rules. If you use module- as a prefix, it will be a bit redundant. Therefore, SMACSS recommends using the module name directly without any prefix.

/* Example Module */.example { }/* Callout Module */.callout { }/* Callout Module with State */.callout.is-collapsed { }/* Form field module */.field { }/* Inline layout */.l-inline { }

3. Suggestions for writing selectors

SMACSS briefly introduces how browsers parse CSS, and based on this, how to write selectors and optimize them Selector performance, recommendations are made.

Conclusion

This article gives an overview of SMACSS, hoping that readers can have an overall understanding of SMACSS. The specific content of SMACSS will be released in subsequent articles, so please stay tuned.