Example Analysis of ITCSS of CSS Design pattern

This article shares with you the content of a sample analysis of ITCSS for CSS design patterns. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. ITCSS is actually very similar to SMACSS. SMACSS classifies CSS, while ITCSS layers CSS.

2. Layering is vertical, from top to bottom, layer by layer.

Layering: seven layers

Different from SMACSS: the hierarchy is more detailed.

We can see that the top layer is Settings, then Tools, then down, and finally trumps.

The higher it goes up, the better its reusability.

Settings: a variable or method of a preprocessor, such as $color: # eee;$font-primary: 14px

Tools (tools): Mixins and functions

Generic (regular): CSS resets, which may include Eric Meyer resets, Normalize.css or your own batch of code

Base (element): a single HTML element selector without classes

Objects (object): a page structure class that usually follows the OOCSS method

Components (component): an aesthetic class used to style any page element and all page elements (usually used in conjunction with the structure of an object class)

Trumps (importent): the most important style that overrides anything else in the triangle

Thank you for reading! This is the end of this article on "sample Analysis of ITCSS of CSS Design patterns". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!