一、css的命名

1. BEM

定义
BEM全称 Block Element Modifier,分别表示为块、元素、修饰符

Block 该区域元素的元素性质。例：card、list、nav、board

（1）命名意义准确，具有唯一性
（2）可以放到任何位置，可以相互嵌套
（3）单词可以使用驼峰或单连字符

Element Block区域中的特定元素，用双下划线( __ )表示。例：card__name、list__item、nav__text、board__btn

（1）命名意义准确
（2）可以相互嵌套（3）单词可以使用驼峰或单连字符

Modifier Element特定元素的具体样式或状态，用双连字符（ -- ）表示。例：card__name--red、board__btn--active

（1）命名意义准确
（2）单词可以使用驼峰或单连字符

优点：代码样式规范，便于阅读
缺点：代码冗长，书写繁琐

注意：
使用时，类名不是展示所有层级结构，这样会导致类名过长。
正确做法是只书写当前元素的性质Block和特定Element。

2. oocss

定义
oocss全称 Object Oriented Css，面向对象的css，即css模块化。

避免后代选择器和id选择器。使用class选择器代替标签选择器。提倡重用性。

使用原则：

结构与样式分离

//定义多个样式不同的按钮

//结构
.btn{
    width:300px;
    height:150px;
    border-radius:75px;
}

//样式
.btn-red{
    color:white;
    font-size:24px;
    font-weight:bold;
    background-color:red;
    border:2px solid white;
}
.btn-yellow{
    color:white;
    font-size:24px;
    font-weight:bold;
    background-color:yellow;
    border:2px solid white;
}

//使用
<button class="btn btn-red">按钮</button>

结构：封装性属性。如，margin、padding、width、height、display、box-sizing
样式：表现性属性。如，color、border、backgound-color、box-shadow

借助@each可以定义多种主体样式：

$theme-colors{
warning:yellow,
success:green,
danger:red
}

@each $key,$value in $theme-colors{
    .btn-#{$key}{
        color:white;
        background-color:$value;
    }
}

此时我们就得到了.btn-warning、.btn-success、.btn-danger三种不同样式的类，当我们需要其他的类时，可以添加新的$theme-colors键值。此语法参考(css-sass脚本语言 - 掘金 (juejin.cn))过往文章。

容器和内容分类
我们可以借助BEM来说明。容器就相当于B性质，内容就相当于E特定。

.card{
    display:flex;
    justify-content:center;
    align-items:center;
    width:350px;
    height:350px;
}

.card .btn{
    width:100px;
    height:50px;
}

从这个例子中，我们可以分析得出，card是容器，而btn是内容。此时，我们看到btn这个类属于card的子类。当我们向使用btn时，我们会发现，无法复用btn，因为它的权重是0,0,2,0，要考虑权重问题，所以不能复用。

所以，我们需要拆出来，btn成为单独的类。

.card{
    display:flex;
    justify-content:center;
    align-items:center;
    width:350px;
    height:350px;
}

.btn{
    width:100px;
    height:50px;
}

容器：.container、.header
内容：.btn、.input

3.SMACSS

定义

SMACSS全称 Scalable and Moduler Architecture for CSS，可扩展的模块化css结构

在oocss的基础上，对元素进行结构分类和和指定命名，达到扩展和模块化。

结构分类包括以下几种：

Base

设置初始化样式

规则
（1）不使用id、class、!important
（2）使用标签选择器、后代选择器、子代选择器、伪类选择器进行初始化设置

Layout

设置布局样式，分为主要布局样式和次要布局样式。

规则
（1）主要布局使用id选择器，不可重用
（2）次要布局使用class选择器，可重用
（3）次要布局使用l-或layout-前缀进行设置
（4）具有oocss的容器和内容分离原则

Module

设置可重用元素样式，以元素前缀进行命名。

规则
（1）使用class选择器设置
（2）具有oocss的结构与样式分离原则

State

Layout或Moudule上应用特效或动作

规则
（1）可以嵌套在Layout或Moudule中
（2）可以使用js改变样式
（3）使用is-前缀
（4）可以使用!inportant覆盖样式

Theme

用于视觉的Layout或Moudule样式

规则
（1）直接使用Layout或Moudule的class覆盖样式
（2）通过引用class相同命名的样式文件，根据引用顺序，达到覆盖样式

4.ITCSS

定义
ITCSS全称 Inverted Triangle CSS，可扩展可管理的框架，通过分层组织css文件，实现自下而上的特异性。

上层影响下层，下层继承上层

通过三个指标对css项目进行排序：

通用到显性

作用范围越来越小，权重越来越大

低特异到高特异

随着层级的增加，特异性随之增大，避免在低特异性选择器前写高特异性选择器。

深远化到本地化

随着层级的增加，影响范围逐渐减小

项目分成以下七层：

Settings

包含全局设置，不会生成实际的css。例如：颜色、字体、大小

Tools

预处理，可以定义function和mixins，不会生成实际的css

Generic

初始化基本全局样式

Elements

初始化标签样式

Objects

定义全局的可重用页面结构类

Components

定义页面组件样式

Utilities

使用important的层，覆盖任何规则

项目结构：

两种结构方式

以层级做子文件夹，存放相应文件
以层级作为前缀，进行文件命名

使用时，需要按层级顺序引入

5.Atomic CSS

ACSS 全称Atomic css，原子化css

Atoms（原子）：为网页构成的基本元素。
Molecules（分子）：由原子构成的简单UI组件。
Organisms（组织）：由原子及分子组成的相对复杂的UI构成物。
Templates（模板）：将以上元素进行排版，显示设计的底层内容结构
Pages（页面）：将实际内容（图片、文章等）套件在特定模板，页面是模板的具体实例。

GitHub上面有一款开源的ACSS工具，叫做 Atomizer

css-命名和冲突避免