前端基础（十三）：CSS, SCSS规范

资源：前端开发规范

CSS, SCSS

规范使用soft tab（4个空格）
每个属性声明末尾都要加分号
空格

以下几种情况不需要空格：
属性名后
多个规则的分隔符’,\’前
!important \’!\’后
属性值中’(‘后和’)\’前
行末不要有多余的空格
以下几种情况需要空格：
属性值前
选择器
```
>
```
,
```
+
```
,
```
~
```
前后
```
{
```
前
```
.element {
```
!important \’!\’前
```
@else
```
前后
属性值中的’,\’后
注释
```
/*
```
后和
```
*/
```
前

/* good */.element > .dialog{color: red !important;background-color: rgba(0, 0, 0, .5);}@if {...} @else {...}

空行文件最后保留一个空行
\’}\’后最好跟一个空行，包括scss中嵌套的规则

属性之间需要适当的空行，属性声明顺序组别

.declaration-order {display: block;float: right;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;border: 1px solid #e5e5e5;border-radius: 3px;width: 100px;height: 100px;font: normal 13px \"Helvetica Neue\", sans-serif;line-height: 1.5;text-align: center;color: #333;background-color: #f5f5f5;opacity: 1;}

// 下面是推荐的属性的顺序[[\"display\",\"visibility\",\"float\",\"clear\",\"overflow\",\"overflow-x\",\"overflow-y\",\"clip\",\"zoom\"],[\"table-layout\",\"empty-cells\",\"caption-side\",\"border-spacing\",\"border-collapse\",\"list-style\",\"list-style-position\",\"list-style-type\",\"list-style-image\"],[\"-webkit-box-orient\",\"-webkit-box-direction\",\"-webkit-box-decoration-break\",\"-webkit-box-pack\",\"-webkit-box-align\",\"-webkit-box-flex\"],[\"position\",\"top\",\"right\",\"bottom\",\"left\",\"z-index\"],[\"margin\",\"margin-top\",\"margin-right\",\"margin-bottom\",\"margin-left\",\"-webkit-box-sizing\",\"-moz-box-sizing\",\"box-sizing\",\"border\",\"border-width\",\"border-style\",\"border-color\",\"border-top\",\"border-top-width\",\"border-top-style\",\"border-top-color\",\"border-right\",\"border-right-width\",\"border-right-style\",\"border-right-color\",\"border-bottom\",\"border-bottom-width\",\"border-bottom-style\",\"border-bottom-color\",\"border-left\",\"border-left-width\",\"border-left-style\",\"border-left-color\",\"-webkit-border-radius\",\"-moz-border-radius\",\"border-radius\",\"-webkit-border-top-left-radius\",\"-moz-border-radius-topleft\",\"border-top-left-radius\",\"-webkit-border-top-right-radius\",\"-moz-border-radius-topright\",\"border-top-right-radius\",\"-webkit-border-bottom-right-radius\",\"-moz-border-radius-bottomright\",\"border-bottom-right-radius\",\"-webkit-border-bottom-left-radius\",\"-moz-border-radius-bottomleft\",\"border-bottom-left-radius\",\"-webkit-border-image\",\"-moz-border-image\",\"-o-border-image\",\"border-image\",\"-webkit-border-image-source\",\"-moz-border-image-source\",\"-o-border-image-source\",\"border-image-source\",\"-webkit-border-image-slice\",\"-moz-border-image-slice\",\"-o-border-image-slice\",\"border-image-slice\",\"-webkit-border-image-width\",\"-moz-border-image-width\",\"-o-border-image-width\",\"border-image-width\",\"-webkit-border-image-outset\",\"-moz-border-image-outset\",\"-o-border-image-outset\",\"border-image-outset\",\"-webkit-border-image-repeat\",\"-moz-border-image-repeat\",\"-o-border-image-repeat\",\"border-image-repeat\",\"padding\",\"padding-top\",\"padding-right\",\"padding-bottom\",\"padding-left\",\"width\",\"min-width\",\"max-width\",\"height\",\"min-height\",\"max-height\"],[\"font\",\"font-family\",\"font-size\",\"font-weight\",\"font-style\",\"font-variant\",\"font-size-adjust\",\"font-stretch\",\"font-effect\",\"font-emphasize\",\"font-emphasize-position\",\"font-emphasize-style\",\"font-smooth\",\"line-height\",\"text-align\",\"-webkit-text-align-last\",\"-moz-text-align-last\",\"-ms-text-align-last\",\"text-align-last\",\"vertical-align\",\"white-space\",\"text-decoration\",\"text-emphasis\",\"text-emphasis-color\",\"text-emphasis-style\",\"text-emphasis-position\",\"text-indent\",\"-ms-text-justify\",\"text-justify\",\"letter-spacing\",\"word-spacing\",\"-ms-writing-mode\",\"text-outline\",\"text-transform\",\"text-wrap\",\"-ms-text-overflow\",\"text-overflow\",\"text-overflow-ellipsis\",\"text-overflow-mode\",\"-ms-word-wrap\",\"word-wrap\",\"-ms-word-break\",\"word-break\"],[\"color\",\"background\",\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader\",\"background-color\",\"background-image\",\"background-repeat\",\"background-attachment\",\"background-position\",\"-ms-background-position-x\",\"background-position-x\",\"-ms-background-position-y\",\"background-position-y\",\"-webkit-background-clip\",\"-moz-background-clip\",\"background-clip\",\"background-origin\",\"-webkit-background-size\",\"-moz-background-size\",\"-o-background-size\",\"background-size\"],[\"outline\",\"outline-width\",\"outline-style\",\"outline-color\",\"outline-offset\",\"opacity\",\"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity\",\"-ms-filter:\\\\\'progid:DXImageTransform.Microsoft.Alpha\",\"-ms-interpolation-mode\",\"-webkit-box-shadow\",\"-moz-box-shadow\",\"box-shadow\",\"filter:progid:DXImageTransform.Microsoft.gradient\",\"-ms-filter:\\\\\'progid:DXImageTransform.Microsoft.gradient\",\"text-shadow\"],[\"-webkit-transition\",\"-moz-transition\",\"-ms-transition\",\"-o-transition\",\"transition\",\"-webkit-transition-delay\",\"-moz-transition-delay\",\"-ms-transition-delay\",\"-o-transition-delay\",\"transition-delay\",\"-webkit-transition-timing-function\",\"-moz-transition-timing-function\",\"-ms-transition-timing-function\",\"-o-transition-timing-function\",\"transition-timing-function\",\"-webkit-transition-duration\",\"-moz-transition-duration\",\"-ms-transition-duration\",\"-o-transition-duration\",\"transition-duration\",\"-webkit-transition-property\",\"-moz-transition-property\",\"-ms-transition-property\",\"-o-transition-property\",\"transition-property\",\"-webkit-transform\",\"-moz-transform\",\"-ms-transform\",\"-o-transform\",\"transform\",\"-webkit-transform-origin\",\"-moz-transform-origin\",\"-ms-transform-origin\",\"-o-transform-origin\",\"transform-origin\",\"-webkit-animation\",\"-moz-animation\",\"-ms-animation\",\"-o-animation\",\"animation\",\"-webkit-animation-name\",\"-moz-animation-name\",\"-ms-animation-name\",\"-o-animation-name\",\"animation-name\",\"-webkit-animation-duration\",\"-moz-animation-duration\",\"-ms-animation-duration\",\"-o-animation-duration\",\"animation-duration\",\"-webkit-animation-play-state\",\"-moz-animation-play-state\",\"-ms-animation-play-state\",\"-o-animation-play-state\",\"animation-play-state\",\"-webkit-animation-timing-function\",\"-moz-animation-timing-function\",\"-ms-animation-timing-function\",\"-o-animation-timing-function\",\"animation-timing-function\",\"-webkit-animation-delay\",\"-moz-animation-delay\",\"-ms-animation-delay\",\"-o-animation-delay\",\"animation-delay\",\"-webkit-animation-iteration-count\",\"-moz-animation-iteration-count\",\"-ms-animation-iteration-count\",\"-o-animation-iteration-count\",\"animation-iteration-count\",\"-webkit-animation-direction\",\"-moz-animation-direction\",\"-ms-animation-direction\",\"-o-animation-direction\",\"animation-direction\"],[\"content\",\"quotes\",\"counter-reset\",\"counter-increment\",\"resize\",\"cursor\",\"-webkit-user-select\",\"-moz-user-select\",\"-ms-user-select\",\"user-select\",\"nav-index\",\"nav-up\",\"nav-right\",\"nav-down\",\"nav-left\",\"-moz-tab-size\",\"-o-tab-size\",\"tab-size\",\"-webkit-hyphens\",\"-moz-hyphens\",\"hyphens\",\"pointer-events\"]]

换行

以下几种情况不需要换行：

```
{
```
前
以下几种情况需要换行：
```
{
```
后和
```
}
```
前
每个属性独占一行
多个规则的分隔符
```
,
```
后

注释

/* goods */

/** Modal header*/.modal-header {/* 50px */width: 50px;color: red; /* color red */}

引号

url的内容要用引号
属性选择器中的属性值需要引号

li[data-type=\"single\"]:after {content: \"\";background-image: url(\"logo.png\");}

命名

id采用驼峰式命名
scss中的变量、函数、混合、placeholder采用驼峰式命名

/* class */.element-content {...}/* id */#myDialog {...}/* 变量 */$colorBlack: #000;/* 函数 */@function pxToRem($px) {...}/* 混合 */@mixin centerBlock {...}/* placeholder */%myDialog {...}

颜色

颜色16进制尽量用简写。

/* good */.element {color: #abcdef;background-color: #012;}

属性简写

margin 和 padding 相反，需要使用简写；
常见的属性简写包括font
background
transition
animation

/* not good */.element {transition: opacity 1s linear 2s;}/* good */.element {margin: 10px 20px 30px 40px;transition-delay: 2s;transition-timing-function: linear;transition-duration: 1s;transition-property: opacity;}

媒体查询

尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。

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

SCSS相关

@debug

(是scss用来调试的)

声明顺序：
```
@extend
```
不包含
```
@content
```
的
```
@include
```
包含
```
@content
```
的
```
@include
```
自身属性
嵌套规则

@import 引入的文件不需要开头的’_‘和结尾的’.scss’；

嵌套最多不能超过5层；

@extend 中使用placeholder选择器；

去掉不必要的父级引用符号’&’。

/* not good */@import \"_dialog.scss\";/* good */@import \"dialog\";/* not good */.fatal {@extend .error;}/* good */.fatal {@extend %error;}/* not good */.element {& > .dialog {...}}/* good */.element {> .dialog {...}}

杂项

/* not good */.element {}

元素选择器用
```
小写字母
```
；
去掉小数点前面的0；
```
color: rgba(0, 0, 0, .5);
```
去掉数字中不必要的小数点和末尾的0；
```
/* not good */width: 50.0px;/* good */width: 50px;
```

属性值’0’后面不要加单位；

/* not good */width: 0px;/* good */width: 0;

禁止使用
```
expression
```
表达式
禁止滥用
```
!important
```
同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；
```
-ms
```
代表ie内核识别码
```
-moz
```
代表火狐内核识别码
```
-webkit
```
代表谷歌内核识别码
Opera15以前加
```
-o-
```
，Opera15及以后加
```
-webkit-
```
。

/* good */.element {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background: -webkit-linear-gradient(top, #fff 0, #eee 100%);background:    -moz-linear-gradient(top, #fff 0, #eee 100%);background:         linear-gradient(to bottom, #fff 0, #eee 100%);}

无前缀的标准属性应该写在有前缀的属性后面

-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;

不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系

/* good */.element {color: rgb(0, 0, 0);color: rgba(0, 0, 0, .5);}

不要在一个文件里出现两个相同的规则

用

border: 0;

代替

border: none;

选择器不要超过

4层

（在scss中如果超过4层应该考虑用嵌套的方式来写）；

发布的代码中不要有

@import

,与

<link>

标签相比，

@import

指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

<link>

元素

通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

尽量少用

选择器。

图片预览

img

文件夹, 测试用图片放于

img/demoimg

文件夹;

图片格式仅限于
```
gif
```
,
```
png
```
,
```
jpg
```
命名全部用
```
小写英文字母
```
,
```
数字
```
,
```
_
```
的组合，其中不得包含汉字,空格,特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另外命名分头尾两部分, 用下划线隔开, 比如：
```
ad_left01.gif
```
,
```
btn_submit.gif
```

在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

尽量避免使用半透明的

png

图片(若使用, 请参考css规范相关说明);

运用

css sprite

技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的

sprite

psd

源图中划参考线, 并保存至

img

目录下

命名-缩写规范

使用业界熟知的或者约定俗成的。navigation => nav
header => hd
description => desc

命名-前缀规范

g-全局通用样式命名，前缀 g全称为global，一旦修改将影响全站样式

模块命名方式

ui-

组件命名方式

js-

所有用于纯交互的命名，不涉及任何样式规则。 JSer拥有全部定义权限

避免低效率选择器

/* no good */div#doc {  }li.first {  }/* good */#doc {  }.first {  }

模块化

模块样式的选择器必须以模块名开头以作范围约定

CSS, SCSS

相关推荐

热门文章

热门标签

回顶部