CSS 编码规范

AbnerMing 发布于2019-08-29 17:27 / 554人阅读

摘要：一书写规范缩进使用个空格做为一个缩进层级。尽量最多控制在级以内。数值当数值为之间的小数时，省略整数部分的。长度长度为时须省略单位。二命名规范类名使用小写字母，以中划线分隔。采用驼峰式命名等中的变量函数混合采用驼峰式命名。

一、CSS 书写规范 缩进

使用 4 个空格做为一个缩进层级。

.selector {
    margin: 0;
    padding: 0;
}

空格

1.选择器与 "{" 之间要包含空格；
2.属性名与之后的 ":" 之间不允许包含空格， ":" 与属性值之间要包含空格；
3.列表型属性值书写在单行时，"," 后要跟一个空格；
4.注释 "/*" 后和 "*/" 前要有一个空格。

/* good */
.selector {
    margin: 0;
    font-family: Arial, sans-serif;
}

5.">、+、~ "选择器的两边各保留一个空格。

main > nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

分号

每个属性声明末尾都要加分号。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

空行

1."}" 后最好跟一个空行，包括 scss、less等中嵌套的规则；
2.属性之间需要适当的空行。

.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

换行

1."{" 后和 "}" 前；
2.每个属性独占一行；
3.多个规则的分隔符 "," 后。

.element {
    color: red;
    background-color: black;
}

.element,
.dialog {
    ...
}

引号

1.最外层统一使用双引号；
2.url的内容要用引号；
3.属性选择器中的属性值需要引号。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

选择器

1.避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。
尽量最多控制在3级以内。

/* bad */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* good */
.example {}

.example1,
.example2 {}

2.非必要的情况下不要使用元素标签名和 id 或 class 进行组合。

/* bad */
ul#example {}
div.error {}

/* good */
#example {}
.error {}

属性书写顺序

1.同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）的顺序书写，以提高代码的可读性;
2.Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等；
Box Model 相关属性包括：border / margin / padding / width / height 等；
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等；
3.Visual 相关属性包括：background / color / transition / list-style 等；
4.另外，如果包含 content 属性，应放在最前面。

.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ffffd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}

数值

当数值为 0 - 1 之间的小数时，省略整数部分的 0。

panel {
    opacity: .8;
}

长度

长度为 0 时须省略单位。 (也只有长度单位可省)

body {
    padding: 0 5px;
}

颜色

1.rgb 颜色值使用十六进制记号形式 #rrggbb。不要使用 rgb()；
2.带有 alpha 的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。

.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

3.颜色值可以缩写时，使用缩写形式。

/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}

4.颜色值不要使用命名色值。

/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}

5.颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。

/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

带前缀的属性

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

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

不要使用 @import

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

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

二、CSS 命名规范

1.类名使用小写字母，以中划线分隔。
2.避免过度任意的简写，要意义明确。.btn 代表 button，但是 .s 不能表达任何意思。
3.id采用驼峰式命名
4.scss、less等中的变量、函数、混合、placeholder采用驼峰式命名。

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 变量 */
$colorBlack: #000;

/* 函数 */
@function pxToRem($px) {
    ...
}

/* 混合 */
@mixin centerBlock {
    ...
}

/* placeholder */
%myDialog {
    ...
}

附常用类 / id 命名规范：

页　眉：header
内　容：content
容　器：container
页　脚：footer
版　权：copyright　
导　航：menu
主导航：mainmenu
子导航：submenu
标　志：logo
标　语：banner
标　题：title
侧边栏：sidebar
图　标：icon
注　释：note
搜　索：search
按　钮：btn
登　录：login
链　接：link
信息框：message

三、CSS 注释

1.注释可以统一用"/* */"；
2.缩进与下一行代码保持一致；
3.可位于一个代码行的末尾，与代码间隔一个空格。

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

四、编辑器配置

将你的编辑器进行设置，可以避免常见的代码不一致和差异。
具体配置信息可查看这里

云服务器 GPU云服务器规范编码编码规范 css规范 php编码规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114334.html

前端编码规范之：样式（scss）编码规范

摘要：前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂，尽量保持不重复冲突，尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称，会生成。前端编码规范之：Git使用规范前端编码规范之：样式（scss）编码规范前端编码规范之：HTML结构规范前端编码规范之：Vue最佳实践前端编码规范...

reclay 2019-08-29 16:58 评论0 收藏0
前端、HTML+CSS+JS编写规范（终极版）

摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

jsyzchen 2019-08-01 18:15 评论0 收藏0
前端、HTML+CSS+JS编写规范（终极版）

摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

_Dreams 2019-08-22 11:23 评论0 收藏0
前端、HTML+CSS+JS编写规范（终极版）

摘要：文档规范和文档必须采用编码格式文档必须使用的标准文档格式编写规范和的标签属性类名都必须使用小写字母和的属性类名命名必须具有语义化代码必须保持文档结构清晰，必须合理的进行代码缩进文件禁止样式表内引用文件编写格式，样式代码保持一行，多个选择器 HTMLCSS文档规范 HTML和CSS文档必须采用UTF-8编码格式； HTML文档必须使用HTML5的标准文档格式； HTMLCSS编写规范...

Developer 2019-08-29 14:04 评论0 收藏0
编码规范 —— 编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范

摘要：用两个空格代替制表符这是唯一能保证在所有环境下获得一致展现的方法。编辑器配置将你的编辑器按照下面的配置进行设置，以免常见的代码不一致和差异用两个空格代替制表符保存文件时删除尾部的空白符设置文件编码为在文件结尾添加一个空白行。黄金定律永远遵循同一套编码规范 - 可以是这里列出的，也可以是你自己总结的。如果发现规范中有任何错误，敬请指正。 HTML 语法用两个空格代替制表符 (ta...

Karuru 2019-08-01 14:41 评论0 收藏0
前端代码质量管理（一）

导语: 随着业务的增长和开发团队的成员快速增加，其中很多新人来自于五湖四海各大门派，在编码的风格和习惯中也出现各异。通常在相互 codereview 时发现很多代码上的问题，久而久之代码出现了代码难以维护的问题，甚至还会出现低级错误。因此，我尝试在前端代码质量的管控上做了些探索，也总结了一些经验分享给大家。作者：郑振波本文大纲介绍编码规范冗余文件与代码 1. 编码规范在一些老项...

yy13818512006 2019-05-23 17:29 评论0 收藏0