全面总结CSS代码的编写规范及优化建议

前端  /  管理员 发布于 7年前   177

结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码
使用不带 BOM 的 UTF-8 编码。

在 HTML 中指定编码<meta charset="utf-8">；
无需使用@charset 指定样式表的编码，它默认为 UTF-8；
一律使用小写字母

CSS Code复制内容到剪贴板
  1. <!-- Recommended -->   
  2. <img src="google.png" alt="Google">   
  3.   
  4. <!-- Not recommended -->   
  5. <A HREF="/">Home</A>   
  6. /* Recommended */  
  7. color: #e5e5e5;   
  8.   
  9. /* Not recommended */  
  10. color: #E5E5E5;  

省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

CSS Code复制内容到剪贴板
  1. <!-- Recommended -->   
  2. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>   
  3.   
  4. <!-- Not recommended -->   
  5. <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>   
  6. /* Recommended */  
  7. .example {   
  8.   background: url(//www.google.com/images/example);   
  9. }   
  10.   
  11. /* Not recommended */  
  12. .example {   
  13.   background: url(http://www.google.com/images/example);   
  14. }  

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

CSS Code复制内容到剪贴板
  1. /* ==========================================================================  
  2.    组件块  
  3.  ============================================================================ */  
  4.   
  5. /* 子组件块  
  6.  ============================================================================ */  
  7. .selector {   
  8.   padding: 15px;   
  9.   margin-bottom: 15px;   
  10. }   
  11.   
  12. /* 子组件块  
  13.  ============================================================================ */  
  14. .selector-secondary {   
  15.   display: block; /* 注释*/  
  16. }   
  17.   
  18. .selector-three {   
  19.   display: span;   
  20. }  


代码组织
以组件为单位组织代码段；
制定一致的注释规范；
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；
良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。

提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

CSS Code复制内容到剪贴板
  1. /* ==========================================================================  
  2.    组件块  
  3.  ============================================================================ */  
  4.   
  5. /* 子组件块  
  6.  ============================================================================ */  
  7. .selector {   
  8.   padding: 15px;   
  9.   margin-bottom: 15px;   
  10. }   
  11.   
  12. /* 子组件块  
  13.  ============================================================================ */  
  14. .selector-secondary {   
  15.   display: block; /* 注释*/  
  16. }   
  17.   
  18. .selector-three {   
  19.   display: span;   
  20. }  

Class 和 ID

使用语义化、通用的命名方式；
使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线；
避免选择器嵌套层级过多，尽量少于 3 级；
避免选择器和 Class、ID 叠加使用；
出于性能考量，在没有必要的情况下避免元素选择器叠加 Class、ID 使用。

元素选择器和 ID、Class 混合使用也违反关注分离原则。如果 HTML 标签修改了，就要再去修改 CSS 代码，不利于后期维护。

CSS Code复制内容到剪贴板
  1. /* Not recommended */  
  2. .red {}   
  3. .box_green {}   
  4. .page .header .login #username input {}   
  5. ul#example {}   
  6.   
  7. /* Recommended */  
  8. #nav {}   
  9. .box-video {}   
  10. #username input {}   
  11. #example {}  

声明块格式

选择器分组时，保持独立的选择器占用一行；
声明块的左括号 { 前添加一个空格；
声明块的右括号 } 应单独成行；
声明语句中的 : 后应添加一个空格；
声明语句应以分号 ; 结尾；
一般以逗号分隔的属性值，每个逗号后应添加一个空格；
rgb()、rgba()、hsl()、hsla()或 rect()括号内的值，逗号分隔，但逗号后不添加一个空格；
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）；
十六进制值应该全部小写和尽量简写，例如，#fff 代替 #ffffff；
避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;；

CSS Code复制内容到剪贴板
  1. /*  Not recommended  */  
  2. .selector, .selector-secondary, .selector[type=text] {   
  3.   padding:15px;   
  4.   margin:0px 0px 15px;   
  5.   background-color:rgba(0, 0, 0, 0.5);   
  6.   box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF  
  7. }   
  8.   
  9. /* Recommended */  
  10. .selector,   
  11. .selector-secondary,   
  12. .selector[type="text"] {   
  13.   padding: 15px;   
  14.   margin-bottom: 15px;   
  15.   background-color: rgba(0,0,0,.5);   
  16.   box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;   
  17. }  

声明顺序

相关属性应为一组，推荐的样式编写顺序

Positioning
Box model
Typographic
Visual
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。

其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

CSS Code复制内容到剪贴板
  1. .declaration-order {   
  2.   /* Positioning */  
  3.   position: absolute;   
  4.   top: 0;   
  5.   rightright: 0;   
  6.   bottombottom: 0;   
  7.   left: 0;   
  8.   z-index: 100;   
  9.   
  10.   /* Box model */  
  11.   display: block;   
  12.   box-sizing: border-box;   
  13.   width: 100px;   
  14.   height: 100px;   
  15.   padding: 10px;   
  16.   border: 1px solid #e5e5e5;   
  17.   border-radius: 3px;   
  18.   margin: 10px;   
  19.   float: rightright;   
  20.   overflow: hidden;   
  21.   
  22.   /* Typographic */  
  23.   font: normal 13px "Helvetica Neue", sans-serif;   
  24.   line-height: 1.5;   
  25.   text-align: center;   
  26.   
  27.   /* Visual */  
  28.   background-color: #f5f5f5;   
  29.   color: #fff;   
  30.   opacity: .8;   
  31.   
  32.   /* Other */  
  33.   cursor: pointer;   
  34. }  

引号使用

url()、属性选择符、属性值使用双引号。 参考 Is quoting the value of url() really necessary?

CSS Code复制内容到剪贴板
  1. /* Not recommended */  
  2. @import url(//www.google.com/css/maia.css);   
  3.   
  4. html {   
  5.   font-family: 'open sans', arial, sans-serif;   
  6. }   
  7.   
  8. /* Recommended */  
  9. @import url("//www.google.com/css/maia.css");   
  10.   
  11. html {   
  12.   font-family: "open sans", arial, sans-serif;   
  13. }   
  14.   
  15. .selector[type="text"] {   
  16.   
  17. }  

媒体查询（Media query）的位置

将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。

CSS Code复制内容到剪贴板
  1. .element { ... }   
  2. .element-avatar { ... }   
  3. .element-selected { ... }   
  4.   
  5. @media (max-width: 768px) {   
  6.   .element { ...}   
  7.   .element-avatar { ... }   
  8.   .element-selected { ... }   
  9. }  

不要使用 @import

与<link>相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。

替代办法：

使用多个 元素；
通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件；
其他 CSS 文件合并工具；
参考 don’t use @import；

链接的样式顺序：

CSS Code复制内容到剪贴板
  1. a:link -> a:visited -> a:hover -> a:active（LoVeHAte）  

无需添加浏览器厂商前缀

使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。

Autoprefixer 通过 Can I use，按兼容的要求，对相应的 CSS 代码添加浏览器厂商前缀。

模块组织
任何超过 1000 行的 CSS 代码，你都曾经历过这样的体验：

这个 class 到底是什么意思呢？
这个 class 在哪里被使用呢？
如果我创建一个 xxoo class，会造成冲突吗？
Reasonable System for CSS Stylesheet Structure 的目标就是解决以上问题，它不是一个框架，而是通过规范，让你构建更健壮和可维护的 CSS 代码。

Components（组件）

从 Components 的角度思考，将网站的模块都作为一个独立的 Components。

Naming components （组件命名）

Components 最少以两个单词命名，通过 - 分离，例如：

点赞按钮 (.like-button)
搜索框 (.search-form)
文章卡片 (.article-card)
Elements（元素）

Elements 是 Components 中的元素

Naming elements（元素命名）

Elements 的类名应尽可能仅有一个单词。

CSS Code复制内容到剪贴板
  1. .search-form {   
  2.    > .field { /* ... */ }   
  3.    > .action { /* ... */ }   
  4.  }  

On multiple words （多个单词）
对于倘若需要两个或以上单词表达的 Elements 类名，不应使用中划线和下划线连接，应直接连接。

CSS Code复制内容到剪贴板
  1. .profile-box {   
  2.   > .firstname { /* ... */ }   
  3.   > .lastname { /* ... */ }   
  4.   > .avatar { /* ... */ }   
  5. }  

Avoid tag selectors（避免标签选择器）

任何时候尽可能使用 classnames。标签选择器在使用上没有问题，但是其性能上稍弱，并且表意不明确。

CSS Code复制内容到剪贴板
  1. .article-card {   
  2.   > h3    { /* ✗ avoid */ }   
  3.   > .name { /* ✓ better */ }   
  4. }  

Variants（变体）

Components 和 Elements 可能都会拥有 Variants。

Naming variants（变体命名）

Variants 的 classname 应带有前缀中划线 -

CSS Code复制内容到剪贴板
  1. .like-button {   
  2.   &.-wide { /* ... */ }   
  3.   &.-short { /* ... */ }   
  4.   &.-disabled { /* ... */ }   
  5. }  

Element variants（元素变体）

CSS Code复制内容到剪贴板
  1. .shopping-card {   
  2.   > .title { /* ... */ }   
  3.   > .title.-small { /* ... */ }   
  4. }  

Dash prefixes（中划线前缀）

为什么使用中划线作为变体的前缀？

它可以避免歧义与 Elements
CSS class 仅能以单词和 _ 或 - 开头
中划线比下划线更容易输出


Layout （布局）

Avoid positioning properties（避免定位属性）

Components 应该在不同的上下文中都可以复用，所以应避免设置以下属性：

Positioning (position, top, left, right, bottom)
Floats (float, clear)
Margins (margin)
Dimensions (width, height) *


Fixed dimensions（固定尺寸）

头像和 logos 这些元素应该设置固定尺寸（宽度，高度...）。

Define positioning in parents（在父元素中设置定位）

倘若你需要为组件设置定位，应将在组件的上下文（父元素）中进行处理，比如以下例子中，将 widths 和 floats 应用在 list component(.article-list)当中，而不是 component(.article-card)自身。

CSS Code复制内容到剪贴板
  1. .article-list {   
  2.   & {   
  3.     @include clearfix;   
  4.   }   
  5.   
  6.   > .article-card {   
  7.     width: 33.3%;   
  8.     float: left;   
  9.   }   
  10. }   
  11.   
  12. .article-card {   
  13.   & { /* ... */ }   
  14.   > .image { /* ... */ }   
  15.   > .title { /* ... */ }   
  16.   > .category { /* ... */ }   
  17. }  

Avoid over-nesting（避免过分嵌套）

当出现多个嵌套的时候容易失去控制，应保持不超过一个嵌套。

CSS Code复制内容到剪贴板
  1. /* ✗ Avoid: 3 levels of nesting */  
  2. .image-frame {   
  3.   > .description {   
  4.     /* ... */  
  5.   
  6.     > .icon {   
  7.       /* ... */  
  8.     }   
  9.   }   
  10. }   
  11.   
  12. /* ✓ Better: 2 levels */  
  13. .image-frame {   
  14.   > .description { /* ... */ }   
  15.   > .description > .icon { /* ... */ }   
  16. }  

Apprehensions（顾虑）

中划线-是一坨糟糕的玩意：其实你可以选择性的使用，只要将 Components, Elements, Variants 记在心上即可。
我有时候想不出两个单词唉：有些组件的确使用一个单词就能表意，比如 aleter。但其实你可以使用后缀，使其意识更加明确。
比如块级元素：

.alert-box
.alert-card
.alert-block
或行内级元素

.link-button
.link-span
Terminologies（术语）

RSCSS 与其他 CSS 模块组织系统相似的概念

RSCSSBEMSMACSS
ComponentBlockModule
ElementElement?
Layout?Layout
VariantModifierTheme & State

Summary（总结）

以 Components 的角度思考，以两个单词命名（.screenshot-image）
Components 中的 Elements，以一个单词命名（.blog-post .title）
Variants，以中划线-作为前缀（.shop-banner.-with-icon）
Components 可以互相嵌套
记住，你可以通过继承让事情变得更简单
LESS 规范
代码组织

代码按以下顺序组织：

@import
变量声明
样式声明

CSS Code复制内容到剪贴板
  1. @import "mixins/size.less";   
  2.   
  3. @default-text-color: #333;   
  4.   
  5. .page {   
  6.   

  • 上一条：
    非常漂亮的CSS3百叶窗焦点图动画
    下一条：
    使用Div+CSS纯图片实现圆角矩形的方法小结

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客