CSS代码风格小贴士

CSS规范

命名规则 - BEM

• 使用简洁易懂的单词，如header
• 多个单词用-隔开，如app-header
• 使用__表示层级关系，如header__title
• 使用--表示变体，如header--dark
• 层级控制在4级内，最好不超过3级，如header__title__icon
• 嵌套元素过多时，可直接在内部抽象出另一层组件，减少层级

实例：

  

    标题
  



  

    标题
  

  
  
  

    

      副标题
    
  



  

    标题
  

其它可选规则：rscss、SMACSS、OOCSS

规则排序

.example {
  /* 内容 */
  /* 用在伪元素上 */
  content: "";

  /* 特定 */
  /* 某些特定元素的特有规则 */
  list-style: none;
  border-collapse: collapse;

  /* 定位与浮动 */
  position: relative;
  top: 10px;
  right: 5px;
  float: left;
  clear: both;

  /* 显示 */
  display: block;
  visibility: visible;
  opacity: 1;

  /* 盒模型 */
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  padding: 5px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  overflow: hidden;

  /* 背景 */
  background-color: red;
  background-size: 100%;
  /* object-类规则看作背景规则的一种 */
  object-fit: cover;
  object-position: center;

  /* 前景 */
  color: #fff;

  /* 字体、排版 */
  font-size: 1rem;
  font-variant: captalize;
  line-height: 1.3;
  /* 排版类型的规则较多，且多数不常用，顺序可灵活调动 */
  vertical-align: middel;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;

  /* 变换 */
  transform: translate(50%);

  /* 动画 */
  transition: 0.3s;
  animation: flip 0.3s linear;
  will-change: opacity;
}

风格约定

• 任何情况下，每条声明应单独写一行
• 一贯并且正确地进行缩进
• 每组规则与另一组规则之间空一行（一个花括号内为一组规则）
• 整数位为0时，要么统一不写0，要么统一都写（待约定）
• 对于带逗号的值，都好后应该紧跟一个空格，如translate(50px, 20px);

变量

使用CSS变量来管理特殊复用值，如以下类型的值建议使用变量控制

• 大多数颜色值
• 全局性的尺寸值（基本字号，容器宽度等等）

变量命名：
标准CSS变量必须以--开头，多个单词用-隔开，如--theme-color