前言
一 指定的格式
驼峰式命名
类似于.mLayerTitle这样形式的，但这个仅仅是格式，不代表命名规则，和应该如何去思考用什么名称。
以-格式分割开
类似于.m-layer-title ,这种格式也是很常见的。同样也是只有格式，没有命名方式的核心思想的。
二 样式组织思想
BEM（block+element+modify）
块级，元素，修改，它的主要设计思路是需要定义块级，对于子元素分别利用_区分，对于修饰的部分增加--实现。对于比较复杂的块级元素用-实现连接。举证如下：
site-navsite-nav_logosite-nav_loginsite-nav--activesite-nav--active
OOcss
OOCSS是object-oriented CSS的缩写. 主要有两个意思:结构和设计分离容器和内容分离使用这种结构, 开发人员获得可以在不同地方使用的CSS类.通常这时候总是会有两个消息(一个好消息和一个不好的消息):好消息: 通过复用来减少代码量(DRY原则)不好的消息: 维护非常困难(复杂). 当你修改某一个具体的元素的样式的时候, 大部分情况下, 除了修改CSS本身(因为多数的CSS类是通用的), 你还不得不添加更多的标记类(markup).另外, OOCSS本身并不提供具体的规则, 而是抽象的建议, 所以这种方法在生产中的最终结果会有所不同.事实上, OOCSS的想法启发了其他人创建自己的, 更具体的代码结构化方式.具体的延伸就是我们将全局样式，布局、间距、模块样式区分开来，并辅以科学准确约定的方式。
SmacSS 可扩展和模块化结构的 CSS
SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.
Jonathan Snook把它归纳为5个部分:
基本规则(Base rules): 为网址的主要元素设置样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用HTML标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JAVAScript-Style选择);布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤).模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立).状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用"!important"的地方.主题规则(Theme rules): 设计您可能需要更换的样式.我们推荐为属于某个组的CSS类定义命名空间, 并为JavaScript中使用的CSS类使用单独的命名空间.
Atomic CSS 原子 CSS
Atomic CSS是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类.这种类通常也被称为原子类。使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建一个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200.这样设计可以最大程度的统一页面的共用样式，便于管理，尤其在你采用了预处理器之后，可以使用继承，拓展等方式快速使用某常用代码段或者样式模块，最大程度的减少css代码数量。存在的缺点:CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化.直接在HTML中进行显示设置.由于这些短板的存在, 这种做法遭到了大量的批评. 然而, 这种做法对于大型项目来说是有一定效果的.此外, Atomic CSS在各种框架中被用于校正元素样式以及某些层(layers)的其他方法.
MCSS 多层 CSS
MCSS指的是多层CSS(Multilayer CSS). 这种样式写法建议将样式分成多个部分, 每个部分称为层(layers).第0层或基础(Zero layer or foundation), 负责重置浏览器样式的代码(如: reset.css或者normalize.css);基层(Base layer), 包括可重用元素的样式: buttons, input, hints等等.项目层(Project layer), 包括单独的模块和"上下文" - 根据用户端浏览器或用于浏览的设备, 用户权限等对元素的样式进行调整.装饰层(Cosmetic layer), 使用OOCSS风格来书写样式, 对元素外观做微小的调整. 建议仅留下影响外观的风格, 而不能破坏网站的布局(例如颜色和非关键缩进等).层与层之间的交互层次是非常重要的:在基层(Base layer)中定义中性的样式, 并且不影响其它层.基层(Base layer)中的元素只能影响基层的CSS类.项目层(Project layer)中的元素可以影响基层和项目层.装饰层(Cosmetic layer)是以描述性OOCSS类("atomic"类)的形式进行设计, 不会影响其他CSS代码, 而是在标记中有选择的使用.
AMCSS 属性模块 CSS
AMCSS是"属性模块CSS"的缩写.
先让我们来看一个例子: