The following are various implementations of CSS modularity that you may not use in your work, and some of them are obsolete. But hopefully you don’t have a blank face when you read these words!!

BEM

My last post explained it in detail: You haven’t used BEM in 2020? I won’t repeat it here

OOCSS

Object Oriented CSS OOCSS advocates two main specifications

  • Structure and style separation (When defining an element, separate the structure from the style of the element’s appearance to increase CSS reuse)
<div class="header bg"></div>
.header{
  width: 500px;
  height: 100px;
}
.bg{
  background: #f00;
}
Copy the code
  • Separate the container from the content (it’s best not to use tag names to define styles directly to reduce HTML dependency)
<div class="container">
  <h2 class="list"></h2>
  <h2 class="list"></h2>
  <h2 class="list"></h2> </div> // misdefined. Container h2{... } // Correctly define.list{... }Copy the code

AMCSS

CSS Attribute Modules AM is a technique that uses HTML attributes and their values instead of style elements for classes. This way, each attribute effectively declares a separate namespace to encapsulate style information, making HTML and CSS more readable and maintainable.

Simply put, modularize CSS through CSS property selectors

Advantages: Properties deserve flexibility, which is equivalent to increasing the namespace by property values and reducing the global namespace to better modularize CSS

  <div am-blockName>
    <div am-blockname-chilElement></div>
    <p am-tritName="one two">hello</p>
  </div>
Copy the code
  [am-blockName] {
    width: 500px;
  }

  [am-blockname-chilElement] {
    height: 50px;
  }

  [am-tritName~="one"] {
    font-size: 30px;
  }
Copy the code

SMACSS

Scalable and Modular CSS Scalable and Modular CSS Scalable and Modular CSS Scalable and Modular CSS Scalable and Modular CSS SMACSS describes the BASIC rules and naming rules of SMACSS

The five categories

  • Base
  • Layout
  • Module
  • State
  • Theme

The main purpose of using categories is to simplify repetitive operations, reduce code, simplify maintenance, and improve consistency in the user experience

  1. Basic Rules (Base)
  • CSS reset, set CSS reset style sheet
  1. Layout Rules
  • The page is divided into major and minor sections, with the major sections in between, so the layout styles are major and minor
  • The main part uses the ID selector, which you can write if you have a layout style (.l-fixed #header)
  1. Module Rules (Module)
  • Modules are more discrete components of a page, which can be navigation bars, dialog boxes, and so on, and are inside lauout components or other components
  • Each module should be designed to exist as an independent component. This way, the page will be more flexible. If done correctly, modules can be easily moved to different parts of the layout without interruption.
  • Avoid using ids and element selectors and use only class names
  1. State Rules
  • The state is to add and override all other styles, such as on off, right and wrong
  • Usable! important
  • For example, is- and has-
  1. Theme Rules (Theme)
  • Themes define the colors and images that give your application or site a look and feel. By dividing themes into their own set of styles, you can easily redefine these styles for other themes.

SUITCSS

SUIT CSS is an approach focused on improving the CSS authoring experience for component-based development. Component-based systems allow loosely coupled independent units to be implemented and composed into well-defined composite objects. Components are encapsulated but interoperable through interfaces/events

Naming convention:

Tool class grammar: u – -] [sm – – | | md lg utilityName use camel naming

<div class="u-cf">
  <a class="u-floatLeft" href="{{url}}">
    <img class="u-block" src="{{src}}" alt="">
  </a>
  <p class="u-sizeFill u-textBreak">... </p> </div>Copy the code

Syntax for component (responsible for component-specific CSS) : [-][-descendentName][–modifierName]

  • Namespace (Optional)
.twt-button {/ * Button... * /}. Twt-tabs {/ * Tabs... * /}Copy the code
  • ComponentName is written in camel form
<article class="MyComponent"></article>
Copy the code
  • DescendentName (component child name) is written in camel form
<article class="Tweet">
  <div class="Tweet-bodyText"></div>
</article>
Copy the code
  • ModifierName (modifierName) is used to describe component modifiers, written in camel form
<button class="Button Button--default"></button>
Copy the code

Variable syntax: – the ComponentName [- descendant | — modifier] [- onState] – (cssProperty | variableName)

:root {
   ---ComponentName-backgroundColor 
  --ComponentName-descendant-backgroundColor 
  --ComponentName--modifier-backgroundColor 
  --ComponentName-onHover-backgroundColor 
  --ComponentName-descendant-onHover-backgroundColor 
}
Copy the code

Here is just a brief introduction, if you need to know more, you can check the official website

ITCSS

Ndominance Triangle CSS An extensible and maintainable CSS architecture

One of the main tenets of ITCSS is to divide the CSS codebase into sections (called layers) that take the form of inverted triangles:

  • Settings – Used with the preprocessor and contains font, color definitions, etc.
  • Tools – Mixins and features used globally. It is important not to output any CSS in the first 2 layers.
  • Generic – Resets or normalizes styles, box size definitions, etc. This is the first layer to generate the actual CSS.
  • Elements – Styles of HTML Elements such as H1, A, and so on. These come with the browser’s default styles, so we can redefine them here
  • Objects – Class-based selectors that define undecorated design patterns, such as media Objects known to OOCSS
  • Components – Specific UI Components. This is where most of our work is, and our UI components are usually made up of objects and components
  • Utilities – The utility class overrides previous styles in the triangle
  • Here is just a brief introduction, if you need to know more, you can check the official website

So far, the above is all the content of the introduction, if there is any incorrect. Please point it out in the comments. Thank you

Focus on me: front-end Jsoning