本文介绍的以下几种都是对CSS模块化的各种实现，你可能工作中使用不到，甚至部分有些被淘汰。但是希望你看到这些词的时候不会一脸懵逼！！！

BEM

本人的上篇文章有详细的介绍：2020年你还没用BEM？
这里不再赘述

OOCSS

Object Oriented CSS 面向对象的CSS
OOCSS主要提倡两种规范

结构和样式分开（定义一个元素的时候，将本身的结构和对元素外观的样式分开，增强css的复用性）

<div class="header bg"></div>
.header{width: 500px;height: 100px;
}
.bg{background: #f00;
}

容器和内容分开（最好不要直接使用标签名定义样式，减少对html的依赖）

<div class="container"><h2 class="list"></h2><h2 class="list"></h2><h2 class="list"></h2>
</div>// 错误定义
.container h2{ ... }
// 正确定义
.list{ ... }

AMCSS

Attribute Modules for CSS CSS的属性模块
AM是一种使用HTML 属性及其值而非样式元素的类的技术。这样，每个属性都可以有效地声明一个单独的命名空间来封装样式信息，从而使HTML和CSS更具可读性和可维护性。

简单来说就是通过css属性选择器来模块化CSS

优势：
属性值得灵活性，相当于通过属性值来增加命名空间，减少全局名称空间，以便更好的将css模块化

  <div am-blockName><div am-blockname-chilElement></div><p am-tritName="one two">hello</p></div>

  [am-blockName] {width: 500px;}[am-blockname-chilElement] {height: 50px;}[am-tritName~="one"] {font-size: 30px;}

SMACSS

Scalable and Modular Architecture for CSS 可扩展和模块化的css架构
SMACSS主要是介绍遵循SMACSS的基本规则和命名规则，按照SMACSS的规则，书写规范的CSS

五种类别

Base
Layout
Module
State
Theme

使用类别主要是将重复的操作简化，减少代码量，简化维护，并提高用户体验的一致性

基本规则（Base）

css重置，设置css重置样式表

布局规则（Layout）

将页面分为主要部分和次要部分，主要部分位于主要部分之间，因此布局样式分为主要样式和次要样式
主要部分使用id选择器，含有布局样式的话可以这么写（.l-fixed #header）

模块规则（Module）

模块是页面中更离散的组件，可以是导航栏、对话框等等，模块位于lauout组件或其他组件内部
每个模块都应设计为作为独立组件存在。这样，页面将更加灵活。如果操作正确，则可以轻松地将模块移动到布局的不同部分，而不会中断。
请避免使用ID和元素选择器，而仅使用类名

状态规则（State）

状态是增加和覆盖所有其他样式，例如打开关闭、正确和错误
可以使用!important
例如：is-、has-

主题规则（Theme）

主题定义了颜色和图像，使您的应用程序或站点具有外观。将主题分成自己的样式集，可以轻松地为其他主题重新定义这些样式。

SUITCSS

SUIT CSS是一种专注于为基于组件的开发改善CSS创作体验的方法
基于组件的系统允许将松散耦合的独立单元实现和组合为定义明确的复合对象。组件已封装，但能够通过接口/事件进行互操作

命名约定：

工具 class
语法：u-[sm-|md-|lg-] utilityName使用驼峰式命名

<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>

组件（负责组件特定样式的css）
语法：[-][-descendentName][–modifierName]

namespace(命名空间可选）

.twt-Button { / * … * / }
.twt-Tabs { / * … * / }

ComponentName（组件名称）
使用驼峰式写法

<article class="MyComponent"></article>

descendentName（组件子节点名称）
使用驼峰式写法

<article class="Tweet"><div class="Tweet-bodyText"></div>
</article>

modifierName（修饰符名称）
用于描述组件修饰符，使用驼峰式写法

<button class="Button Button--default"></button>

变量
语法：–ComponentName[-descendant|–modifier][-onState]-(cssProperty|variableName)

:root {---ComponentName-backgroundColor --ComponentName-descendant-backgroundColor --ComponentName--modifier-backgroundColor --ComponentName-onHover-backgroundColor --ComponentName-descendant-onHover-backgroundColor
}

这里只是简单介绍，如需深入了解可以自行查看官网

ITCSS

nverted Triangle CSS 倒三角CSS
可扩展和可维护的CSS架构

ITCSS的主要原则之一是将CSS代码库分为几个部分（称为layer），这些部分采用倒三角形的形式：

Settings –与预处理器一起使用，并包含字体，颜色定义等。
Tools–全局使用的mixin和功能。重要的是不要在前2层中输出任何CSS。
Generic –重置或规范化样式，框大小定义等。这是生成实际CSS的第一层。
Elements –HTML元素（例如H1，A等）的样式。这些带有浏览器的默认样式，因此我们可以在此处重新定义它们
Objects –定义未装饰设计模式的基于类的选择器，例如OOCSS已知的媒体对象
Components –特定的UI组件。这是我们大部分工作的地方，我们的UI组件通常由对象和组件组成
Utilities –工具程序类能够覆盖三角形中之前发生的样式
这里只是简单介绍，如需深入了解可以自行查看官网

到此为止，以上就是介绍的全部内容，如有不正确之处。还望在评论中指出，谢谢

关注我：前端Jsoning

简述BEM, OOCSS，AMCSS，SMACSS，SUITCSS，ITCSS相关推荐

好程序员web前端分享值得参考的css理论：OOCSS、SMACSS与BEM
为什么80%的码农都做不了架构师?>>> 好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular C ...
如何写好CSS？（OOCSS DRY SMACSS）
同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个怪物不是一个人造就的,早期的开发者选择了SCSS技术,但混乱的import导致了 ...
什么是前端工程化？如何实现前端工程化？
一.什么是前端工程化前端工程化是使用软件工程的方法来解决前端的开发流程中模块化.组件化.规范化.自动化的问题,其主要目的为了提高效率和降低成本. 二.为什么需要前端工程化? Web业务日益复杂化和多 ...
Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
问答：如何规划CSS 中的命名方式如何看待 CSS 中 BEM 的命名方式？
好多盆友很纠结 css命名规则怎么弄,还没起步就被绊住了,那么今天蝈蝈就针对这个问题来讨论一下没什么技术含量,但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人 ...
现代前端开发路线图：从零开始，一步步成为前端工程师
https://36kr.com/p/5128487.html 编者按:很多人都想学编程.但是苦于没有具体的步骤和指导.比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样 ...
前端新手入门必读！前端开发线路图分享
很多人都想学编程.但是苦于没有具体的步骤和指导.比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具.因为经常被人问到类似的问题,全栈开发者Kamran Ahmed索 ...
Vue3 企业级优雅实战 - 组件库框架 - 4 组件库的 CSS 架构
1 常见的 CSS 架构模式常见的 CSS 架构模式有很多:OOCSS.ACSS.BEM.SMACSS.ITCSS 等,其中 SMACSS 和 ITCSS 很相似.我在企业级项目中最常使用的是简化版 ...
css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...

简述BEM, OOCSS，AMCSS，SMACSS，SUITCSS，ITCSS

BEM