前端编码规范—css规范

发表于 | 分类于 |
前端编码规范—css规范

前端编码规范—css规范

编码

在 css 首行设置文件编码为 UTF-8。

@charset "UTF-8";

CSS Reset

前端开发人员，整个项目需要一个css reset的文件，以确保不同浏览器的css解释器能对同一句css语句解释一致。
当你项目引入框架，尤其是样式框架，例如Bootstrap、jQuery-ui等等。框架一般都会自带css reset的文件，一般都是框架主样式文件的头部。这时候需要看框架css reset后是否是整个项目需要的，适合项目的。如果不是，需要自己写一个css reset文件，在框架样式的下方，在页面样式文件的上方引入。这样既可以覆盖框架的css reset，又可以不影响你缩写的页面样式。
目前我们在用的base.css是阿里旗下aliceui的基础样式文件，如下：

/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
    background:#fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-overflow-scrolling : touch;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    margin:0;padding:0;
}
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { 
    display:block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
    display: inline-block;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea {
    font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,"Hiragino Sans GB",\5b8b\4f53,sans-serif;
}
input,select,textarea {
    font-size:100%;
}
/* 去掉各Table  cell 的边距并让其边重合 */
table {
    border-collapse:collapse;border-spacing:0;
}
/* IE bug fixed: th 不继承 text-align*/
th {
    text-align:inherit;
}
/* 去除默认边框 */
fieldset,img {
    border:0;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
    display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym {
    border:0;font-variant:normal;
}
/* 一致的 del 样式 */
del {
    text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
    font-style:normal;
    font-weight:500;
}
/* 去掉列表前的标识, li 会继承 */
ol,ul {
    list-style:none;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {
    text-align:left;
}
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:500;
}
q:before,q:after {
    content:'';
}
/* 统一上标和下标 */
sub, sup {
    font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* 正常链接 未访问 */
a:link {
    text-decoration:none;
}
/* 鼠标悬停 */
a:hover {
    text-decoration:none;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
    text-decoration:none;
}
/* 代码字体 */
code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}
/* 清理浮动 */
.fn-clear:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.fn-clear {
    zoom:1; /* for IE6 IE7 */
}
/* 隐藏, 通常用来与 JS 配合 */
body .fn-hide {
    display:none;
}
/* 设置内联, 减少浮动带来的bug */
.fn-left,
.fn-right {
    display:inline;
}
.fn-left {
    float:left;
}
.fn-right {
    float:right;
}
/* 单行文字溢出时出现省略号，需设定宽度 */ 
.fn-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 人民币符号 */
.fn-rmb {
    font-family: arial;
    font-style: normal;
    padding-right: 4px;
}
/* chrome 下字体过小的问题 */
.fn-webkit-adjust {
    -webkit-text-size-adjust: none;
}
.fn-overflow{
    overflow: hidden;
}
/* a链接去掉点击时候的虚线*/
a,button,input{text-decoration:none; outline:none;/*ff*/ 
hide-focus:expression(this.hideFocus=true);/*ie*/ 
}
a:hover{ text-decoration: none;}
/*初始化系统默认样式*/
i,em{ font-style:normal;}
input,select,textarea{vertical-align:middle;-webkit-appearance : none; border-radius:0;outline: none;  font-family:\5FAE\8F6F\96C5\9ED1;color: #333;}
*,
*:after,
*::before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* 清除浏览器默认行为 */
*{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
}
a,button{-webkit-user-select:none;}

class 命名

  • class 名称全部为小写且应当尽可能短，并且意义明确。使用有意义的名称，使用有组织的或目的明确的名称，不要使用表现形式的名称。

不推荐

.fw-800 {font-weight:800;}
.red {color:red;}

推荐

.heavy {font-weight:800;}
.important {color:red;}
  • 使用中划线（-）分隔 class 中的单词。虽然它很不方便的让你双击选择，但是它可以增强理解性。另外属性选择器 [attribute|=value] 也能识别中划线（-），所以最好坚持使用中划线作为分隔符。

不推荐

.slide_hd {}
.slide_bd {}

推荐

.slide-hd {}
.slide-bd {}
  • 基于最近的父 class 或基本 class 作为新 class 的前缀。

不推荐

.header .logo {}
.header .banner {}

推荐

.header-logo {}
.header-banner {}
  • 避免太过特别的 class

不推荐

.mainNav320{}
.subNav640{}

推荐

.main-nav{}
.sub-nav{}

减少选择器的嵌套

在写选择器时，要尽可能的减少嵌套层级，一般 2~3 层，不要超过 4 层。
不推荐

.main ul li a span {}

推荐

.main span {}

优化选择器

当构建选择器时应该使用清晰，准确和有语义的 class 名。尽量减少使用标签选择器。如果你只关心你的 class 名，而不是你的代码元素，这样会更容易维护。
不推荐

div.content > header.content-header > h2.title {
    font-size: 2em;
}

推荐

.content > .content-header > .title {
    font-size: 2em;
}

属性简写

css 提供了各种简写属性（font、background 等等），使用简写属性对于代码效率和可读性是有很有用的。
不推荐

.header{
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2px;
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 0;
}

推荐

.header{
    border-top: none;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1px 2px;
}

但是不能滥用简写形式，过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。
例：你只想让一个块元素居中。
不推荐

div{
    width:100px;
    margin:0 auto;
}

推荐

div{
    width:100px;
    margin-right:auto;
    margin-left:auto;
}

省略 0 后面的单位

不要在 0 值后面使用单位。
不推荐

div{
    padding-bottom: 0px;
    margin: 0em;
}

推荐

div{
    padding-bottom: 0;
    margin: 0;
}

颜色的使用

css 中的颜色值可以使用 16 进制来表示，切全部用小写字符。在可能的情况下，可以进行缩写，例如：#fff、#000。
如果在允许的情况下，需要透明度和颜色同时使用的可以使用css3的rgba颜色体系，例如rgba(128,128,128,0.5)

声明顺序

为了保证更好的可读性，我们应该遵循以下顺序：

  1. 定位：position | z-index | top | right | bottom | left | clip
  2. 布局：display | float | clear | visibility | overflow | overflow-x | overflow-y
  3. 尺寸：width | min-width | max-width | height | min-height | max-height
  4. 外边距：margin | margin-top | margin-right | margin-bottom | margin-left
  5. 内边距：padding | padding-top | padding-right | padding-bottom | padding-left
  6. 边框：border | border-top | border-right | border-bottom | border-left | border-radius | box-shadow | border-image
  7. 背景：background | background-color | background-image | background-repeat | background-attachment | background-position | background-origin | background-clip | background-size
  8. 颜色：color | opacity
  9. 字体：font | font-style | font-variant | font-weight | font-size | font-family
  10. 文本：text-transform | white-space | word-break | word-wrap | overflow-wrap | text-align | word-spacing | letter-spacing | text-indent | vertical-align | line-height
  11. 文本修饰：text-decoration | text-shadow
  12. 书写模式：direction | unicode-bidi | writing-mode
  13. 列表：list-style | list-style-image | list-style-position | list-style-type
  14. 表格：table-layout | border-collapse | border-spacing | caption-side | empty-cells
  15. 内容：content | counter-increment | counter-reset | quotes
  16. 用户界面：appearance | text-overflow | outline | outline-width | outline-color | outline-style | outline-offset | cursor | zoom | box-sizing | resize | user-select
  17. 多列：columns | column-width | column-count | column-gap | column-rule | column-rule-width | column-rule-style | column-rule-color | column-span | column-fill | column-break-before | column-break-after | column-break-inside
  18. 伸缩盒：flex
  19. 变换，过渡，动画：transform | transition | animation

媒体查询

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

.element {}
.element-avatar {}
.element-selected {}

@media (min-width: 480px) {
    .element {}
    .element-avatar {}
    .element-selected {}
}

带前缀的属性

当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。

.selector {
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
            box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

引号

属性选择器或属性值用双引号（”“），而不是单引号（”）括起来。url 的值不要使用引号。

不推荐

input[type='submit'] {
    font-family: 'open sans', arial, sans-serif;
}
body:after {
    content: 'pause';
}

推荐

input[type="submit"] {
    font-family: "open sans", arial, sans-serif;
}
body:after {
    content: "pause";
}

声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束。
不推荐

.demo {
    width:100px;
    height:100px
}

推荐

.demo {
    width:100px;
    height:100px;
}

多行规则声明

为了易读性和便于快速编辑，统一将语句分为多行，即使该样式只包含一条声明。

不推荐

.demo {width:100px;height:100px;}

推荐

.demo {
    width:100px;
    height:100px;
}

中文字体引用

css 中文字体可以用 unicode 格式来表示，比如“宋体”可以用 \5B8B\4F53 来表示。具体参考下表：

中文名英文名unicode
宋体SimSun\5B8B\4F53
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1

更多字体编码点击查看。

hack 的使用

虽然 hacks 能够很方便的解决浏览器之间的兼容问题，但是我们还是尽量不使用 hacks，尽量从根本上解决问题，比如改变结构等等。

压缩

当项目测试完成准备上线，所有的样式文件需进行压缩，可以使用gulp、webpack等构建工具，也可以使用自己的开发工具或者网站的在线压缩进行css文件的压缩，确保上线的文件是最优的，同时原版未压缩的文件一定要保存完好，方便以后的二开。

对于 sass 的嵌套

如果你的项目正在使用sass作为样式的预编译工具。在 sass 中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。

如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，可以使用常规的 css 选择器链，这将防止您的脚本看起来过于复杂。

不推荐

.content {
    display: block;
}
.content > .news-article > .title {
    font-size: 1.2em;
}

推荐

.content {
    display: block;
    > .news-article > .title {
      font-size: 1.2em;
    }
}

当使用 sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序。

  1. 当前选择器的 @extend 和 @include
  2. 当前选择器的样式属性
  3. 父级选择器的伪类选择器（:first-letter，:hover，:active 等等）
  4. 伪类元素（:before 和 :after）
  5. 父级选择器的声明样式（.selected，.active 等等）
  6. 用 sass 的上下文媒体查询
  7. 子选择器作为最后的部分
.test {
    @extend %clearfix;
    color:#ccc;
    &:hover {
        color:#000;
    }
    &:before {
        border:1px solid #eee;
        content:"";
    }
    &.active {
        color:#f00;
        &:hover {
            color:#ff0;
        }
    }
    @media screen and (max-width: 640px) {
        display:block;
        font-size:2em;
    }
    > .title {
        font-size:1.2em;
    }
}
坚持技术分享，您的支持将鼓励我继续创作！
7* WeChat Pay

微信打赏

7* Alipay

支付宝打赏