Bootstrap CSS编码规范,专业web工程师才懂

  • 2016年10月05日
  • 0 Comments

Bootstrap CSS编码规范的黄金定律,永远遵循同一套编码规范,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。

Bootstrap css编码规范IT小生总结了最全面的知识供大家有一个最全面的认识和掌握。

Bootstrap css 编码规范的主要内容包括以下内容:

语法,声明顺序,媒体查询(Mediaquery)的位置,带前缀的属性,单行规则声明,简写形式的属性声明,Less和Sass中的嵌套,注释,class命名,选择器,代码组织。

那么下面为你详细解释每个规范的详细内容吧!!!

第一;语法部分详细内容如下;

用两个空格来代替tab键--这是唯一能保证在所有环境下获得一致展现的方法。

在为选择器分组时,需要把个选择器独立一行摆放,例如;

错误的写法:

.selector, .selector-secondary, .selector[type=text] {

}

正确的写法:

.selector,

.selector-secondary,

.selector[type="text"] {

}

为了代码的易读性,在每个声明块的左花括号前添加一个空格,声明块的右花括号应当单独成行。

例如:.selector[type="text"] {

}

每条声明语句的:后应该插入一个空格,并且每条声明都应该独占一行,所有声明语句都应当以分号结尾。

例如:padding: 15px;

margin-bottom: 15px;

对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。

不要在rgb()、rgba()、hsl()、hsla()或rect()值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。

例如:

错误写法:background-color:rgba(0, 0, 0, 0.5);

正确写法:background-color: rgba(0,0,0,.5);

对于属性值或颜色参数,省略小于1的小数前面的0(例如,.5代替0.5;-.5px代替-0.5px)。

十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。

尽量使用简写形式的十六进制值,例如,用#fff代替#ffffff。

为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。

避免为0值指定单位,例如,用margin:0;代替margin:0px;。

第二;声明顺序详细内容如下;

相关的属性声明应当归为一组,并按照下面的顺序排列:如图,

在编写CSS属性的时候应该把属相相关的归为一组,并按下面的顺序严格排序。

Positioning(定位属性)

Boxmodel(盒模型)

Typographic(文字排版方面)

Visual(视觉方面)

为什么要这样排序?由于Positioning(定位属性)可以从正常的文档流中移除元素,并且还能覆盖盒模型(boxmodel)相关的样式,盒模型排在第二位,因为它决定了组件的尺寸和位置,其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

第三;不要使用@import,如图,

同<link>标签相比,@import指令要慢非常多,不但增加了额外请求次数,还会导致很多不可预料的问题发生。

第四;带前缀的属性

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

第五:简写形式的属性声明

应当尽量限制使用简写形式的属性声明,过度使用简写形式的属性声明会导致代码混乱,并且会对属性值带来不必要的覆盖从而引起意外的副作用。常见的滥用简写属性声明如下几个:

padding,margin,font,background,border,border-radius

例如;

margin: 0 0 10px;可以用margin-bottom: 10px;

background: red;可以用 background-color: red;

background: url("image.jpg");可以用background-image: url("image.jpg");

第六;注释

代码是由人编写并维护的,好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或class名称。

按组来编写注释,并且组与组之间空一行,注释与对应组之间不空行。

第七;class命名

class名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关class的命名(类似于命名空间)(例如,.btn和.btn-danger)。

避免过度任意的简写。.btn代表button,但是.s不能表达任何意思。

class名称应当尽可能短,并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。

基于最近的父class或基本(base)class作为新class的前缀。

使用.js-*class来标识行为(与样式相对),并且不要将这些class包含到CSS文件中。

在为Sass和Less变量命名是也可以参考上面列出的各项规范。

第八;选择器

对于通用元素使用class,这样利于渲染性能的优化。

对于经常出现的组件,避免使用属性选择器(例如,[class^="..."])。浏览器的性能会受到这些因素的影响。

选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过3。

只有在必要的时候才将class限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的class时--前缀类似于命名空间)。

第九;还有其他一些注意的规范如下:

尽量避免css hacks。

字体名称使用英文,如黑体(SimHei),宋体(SimSun),微软雅黑(Microsoft Yahei)。

本文属于IT小生原创文章仅此发布在头条号,IT小生会写完整套BOOTSTRA框架教程。


本文来自网络,版权归原作者所有。来自:http://www.toutiao.com/a6288283161235538178/


分享到: 新浪微博 微信 更多

发表评论  (一键登陆)