This is the 20th day since I participated in the August Gwen Challenge.

Hello everyone, today we are going to talk about THE DESIGN mode of CSS ITCSS and ACSS, no more nonsense, let’s do.

The CSS design pattern

ITCSS

ITCSS and SMACSS are actually very similar, but SMACSS is a classification of CSS, while ITCSS is a layer of CSS. The layering is vertical, from top to bottom, layer to layer.

  • Layers: seven layers

  • Different from SMACSS: the levels are more detailed

Let’s look at one of his layered structures:

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

It gets more reusable as you go up.

  • Settings: preprocessor variables or methods, such as $color: #eee; $font-primary: 14px

  • Tools: Mixins and functions

  • Generic (general) : CSS resets, which may include Eric Meyer’s resets, normalize.css or your own batch of code

  • Base: A single HTML element selector with no classes

  • Objects: Page structure classes that normally follow the OOCSS approach

  • Components: Aesthetic classes used to set the styles of any page element and all page elements (often used in conjunction with the structure of object classes)

  • Trumps (importent) : The most important style, used to override anything else in the triangle

The position can be placed as follows:

Generic this is installed via NPM install, so you don’t need to configure it separately.

The rest should be written separately in the Vue Component.

ACSS

  • A style attribute is a class

  • Benefits: strong reusability, low maintenance cost

  • Cons: Breaks the semantics of CSS naming

Example: TailwindCSS. Refer to the link

Well, that’s all for today, and I’ll see you next time. I’m Augus, a software engineer who likes to screw around. END~~~