Css规范
OOCSSSMACSSBEM
OOCSS(Object Oriented CSS)面向对象的css
主要分成四个部分
Template：模板Grids：栅格布局Module：组件Content：内容
Template模板
主要负责HTML的结构，让HTML更有层次感。
可以按功能模块来构建HTML的结构
常见的如：
人体架构
.header.body.footer
垂直方向
.top.middle.bottom
水平方向
.left.main.right
事物的结构构造（房子）由外向内
.building.level.room.door.window.wall.inner
结构整么搭，要根据业务来构建，以上只供参考
Grids栅格布局
主要是布局方面的类如何定义，可能采用的布局方式不同而不同。
参见的css布局：
浮动布局弹性盒子布局Grid布局
Grid布局由于兼容性问题，现在大多采用浮动布局和弹性盒子(IE10+ , 移动端)
浮动布局
.line.unit.lastUnit.size1of2.size2of3
//结构 也叫容器.line { ?position:relative;}.line:after { ?content: ‘ ‘; ?display: ‘block‘; ?height: 0; ?clear:both; ?visibility: hidden;}//浮动.unit { ?float: left;}//添加到最后一个 unit后.lastUnit { ?display: table-cell; ?float: none; ?width: auto;}//unit 的比例 1/2 .size1of2 { ?width: 50%;}//unit 的比例2/3.size2of3 { ?width: 66.6%;}浮动布局清浮动还可以参考bootstrap3 更优雅
.line:before,.line:after { ?content: ‘‘; ?display: table;}.line:after { ?clear: both;}弹性盒子参考bootstrap4
.container.row.col
Module组件
各个组件特有的结构和样式。
以下类：
btnbtn btn-errormodal md-title
这里只要使用了继承的机制btn-error继承了btn的基本样式，然后扩展了自己的样式errormd-title继承了modal的基本样式，然后添加自己专属样式
在sass中，可以通过占位符%和搭配@extend实现
Content内容
定义html标签，适合自己应用的基本样式，不用类，直接定义标签的样式。
SMACSS可扩展模块化架构的CSS
smacss免费在线书籍(英)
SMACSS的5大核心分类
BaseLayoutModuleStateTheme
Base
负责定义页面的默认样式，由于不同的浏览器都有自己的默认样式，要做到在不同浏览器上效果一致，需要开发者重写这些样式。
常见的base配置有Reset.css 和 normalize.css
由于中文和英文排版和显示有区别，推荐参考妹子ui的base。
base文件的规范：该文件只使用标签选择器、标签选择器配伪类、*，!important不应该出现在该文件中
*{ ???margin:0; ???padding:0; ???border:0;}*,*:before,*:after { ?box-sizing: border-box; ?-webkit-tap-highlight-color: transparent;}html,body { ?min-height: 100%; ?background-color: #fff;}a:active,a:hover { ?outline: 0;}Layout
主要负责页面的布局，在布局的时候，我们首先对页面进行结构布局，如圣杯布局
#header#article#sidebar#main
#footer
对于整体的结构布局，由于只出现一次，且只能有一个，这里要使用id选择器。
#header, #article, #footer { ???width: 960px; ???margin: auto;}#article { ???border: solid #CCC; ???border-width: 1px 0 0;}对于行列的布局，也即局部的布局，这些可以多次重复使用的，就不能使用id选择器了。
通过采用前缀的方式区分，l-，只要是和布局相关的都要加l-前缀，且只能是和布局相关的才能使用这个前缀。
常见的有栅格布局，按行和列布局等，可以参考上面OOCSS的Grids栅格布局，只需添加前缀.l-line和.l-unit。
还有，由于列表ul 或 ol是我们页面中最常用结构，很有必要给这个结构设计一个布局方式。
.l-list{ ????margin: 0; ???padding: 0; ???list-style-type: none;}.l-list-item{ ???float: left; ???height: 100px; ???margin-left: 10px;}.l-list(ul/ol)、.l-list-item(li)比如上面这个浮动布局，这里没有清浮动，还可以用弹性盒子等布局方式。
为避免布局混乱，加强结构的层次，可以采用子选择器: >，来强耦合布局和HTML结构
.l-list{ ????margin: 0; ???padding: 0; ???list-style-type: none;}.l-list > .l-list-item{ ???float: left; ???height: 100px; ???margin-left: 10px;}上面的结构强绑定对应的html结构才生效
<ul class=‘l-list‘> ?<li class=‘l-list-item‘></li> ?<li class=‘item‘> ???<ul class=‘list‘> ?????<li class=‘l-list-item‘></li> ???</ul> ?</li></ul>如上面这个，最外层<ul class=‘l-list‘>的 <li>只有类为.l-list-item才生效
而内部的<ul class=‘list‘>的<li class=‘l-list-item‘>就不会生效，l-list-item的父类一定要为.l-list才生效
但是>也有其缺点
IE6不兼容会增加css文件的体积和复杂性
优点
可以用在任何地方，只要html符合格式性能比使用后代选择器或元素选择器更好(计算CSS值的时候)
Module
避免使用id选择器和标签选择器，应该只使用类选择器。
module也即组件，组件应该独立，有自己的命名空间。这个和OOCSS的module一样。
如一个模态窗：
.modal{}.mod-header{}.mod-body{}.mod-footer{}<div class=‘modal‘> ?<div class=‘mod-header‘></div> ?<div class=‘mod-body‘></div> ?<div class=‘mod-footer‘></div></div>State
个人觉得SMACSS最有意思的地方有，一是通过特殊的前缀指定命名空间和划分功能模块，再就是这个State。
表示某个指定状态下的样式，如
.is-collapsed.is-clicked.is-error.is-success.is-hidden
在模块中也可以定制特殊的状态。
.tab { ???background-color: purple; ???color: white;}.is-tab-active { ???background-color: white; ???color: black;}这样就可以参考事物运动的过程，以状态切换点分割运动过程，不但可以减少思维上的复杂性，还利于维护。
特别是用户频繁操作的界面。
涉及到状态改变有四种方式
类名 class name属性选择器 加 data-伪类:hover :focus媒体查询@media
通过改变类名的方式改变状态
通过定义伪类:hover :focus等有状态含义的伪类
通过定义媒体查询，根据屏幕大小变化来改变状态
其中，可以通过改变类名，删除、添加、替换的方式切换状态。
类中可以包含动画，伪类:after :before，还可以通过添加data-来区分不同的状态。
Theme
重写各个组件的基本样式，以达到切换主题的目的
// in module-name.css.mod { ???border: 1px solid;}// in theme.css.mod { ???border-color: blue;}不过本人更喜欢bootstrap的variables.scss的方式
BEM
Block 、 Element 、 Modifier
块 >> 元素 >> 修饰符
.form { }.form--theme-xmas { }.form--simple { }.form__input { }.form__submit { }.form__submit--disabled { }<form class="form form--theme-xmas form--simple"> ?<input class="form__input" type="text" /> ?<input ???class="form__submit form__submit--disabled" ???type="submit" /></form>Block: .form
Element: .form__input .form__submit
Modifier: .form--theme-xmas .form--simple
一个Block由多个Element组成
Element由Block名充当前缀，且用__分隔符来区分Element
Modifier类似SMACSS的State，由Block名充电前缀，且用--分隔符来区分Modifier
上面中有个.form__submit--disabled
代表form块(Block)的submit元素(Element)的disabled修饰符(Modifier)
总结
不管是SMACSS 还是 BEM 都采纳了OOCSSOOCSS是所有的基础SMACSS的分类方式，且提出的State很赞BEM 用于写组件是个很不错的方式，不过类名太长了结合三者，OOCSS为基础，按SMACSS划分项目结构，BEM写组件
.modal{}.modal > .mod_header{}.modal > .mod_body{}.modal > .mod_footer{}.modal > .mod_header-active{}.mod_header > .header-hidden{}.mod_body > .body_title{}.mod_body > .body_title > .title-big{}通过子选择器保存之前的命名空间，然后再开一个前缀，这样就可以避免类名过长
但是使用>会增加css文件的体积。
CSS规范(OOCSS SMACSS BEM)
原文地址：https://www.cnblogs.com/lantuoxie/p/8876160.html