Traditional CSS writing style is arbitrary naming, stacking style, resulting in chaotic results, complex page writing style usually appear hundreds or even thousands of lines of code, CSS design pattern in the actual application of the sudden emergence of the rescue of chaotic style, redundant lines of code situation. For example: BEM design pattern through BEM naming specification semantics of the class name, ITCSS design pattern to solve the hierarchical structure of CSS design, ACSS atomic class design thought to achieve a single variable single atom style, easy to call.

Recently, I have been studying the design scheme of CSS architecture. By learning and understanding the design idea of CSS design mode, I have constructed the CSS architecture project of ITCSS + BEM + ACSS based on the actual project. Gradually have some ideas, here to carry out a comprehensive arrangement, is also to cast a brick to attract jade.

An introduction to the CSS design patterns used in the project

1, ITCSS

  • Settings – Preprocessor variables and methods (no actual CSS output)
  • Tools – Mixins and functions (no actual CSS output)
  • General – CSS reset, which may include Eric Meyer’s reset, normalize.css or your own batch of code
  • Element – A single HTML element selector with no classes
  • Object – a page structure class that usually follows the OOCSS approach
  • Component – Aesthetic class that sets the style of any page element and all page elements (usually used in conjunction with the structure of the object class)
  • Trumps – The most important style, used to override anything else in the triangle

BEM is the basis of my method. If you’ve never heard of BEM before, it stands for Block, Element, and Modifier. When you first touch it, it looks so ugly.

.block { /* styles */ } 
.block__element { /* styles */ } 
.block--modifier { /* styles */ }
Copy the code

2, ACSS

ACSS uses a tight library of class names. These class names are often abbreviated and separated from the content they affect. In an ACSS system, you know what class names do; But there is no relationship between class names (at least not the ones used in style sheets) and content types, that is, one class for each style, also known as atomic class CSS.

Project CSS design pattern implementation

Github (project address)

Through the hierarchical design idea of ITCSS architecture, the style directory and functions are layered:

Write style code through BEM naming specification combined with SassMagic

SassMagic address

ACSS implements the atomic class style for global invocation/reuse

The last

  • This project combines ITCSS + BEM + ACSS to realize the CSS architecture of the final project
  • SassMagic power BEM naming development specification
  • Through THE CSS design mode development of the project, style code introduction, high reuse, the overall structure is clear