Bootstrap CSS编号标准

摘要: 用2个空格符来替代制表符(tab) __ 它是唯一能确保在全部自然环境下得到一致呈现的方式。为挑选器排序时,将独立的挑选器独立放到一行。以便编码的最易读性,在每一个申明块的...

用2个空格符来替代制表符(tab) __ 它是唯一能确保在全部自然环境下得到一致呈现的方式。 为挑选器排序时,将独立的挑选器独立放到一行。 以便编码的最易读性,在每一个申明块的左花括弧前加上一个空格符。 申明块的右花括弧理应独立出行。 每条申明句子的 : 后应当插进一个空格符。 以便得到更准确的不正确汇报,每条申明都应当占有一行。 全部申明句子都理应以分号末尾。最终一条申明句子后边的分号是可选择的,可是,假如省去这一分号,你的编码将会更加容易错误。 针对以分号隔开的特性值,每一个分号后边都应当插进一个空格符(比如,box_shadow)。 不必在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的分号后边插进空格符。那样有利于从好几个特性值(既加分号也加空格符)中区别好几个色调值(只加分号,不用空格符)。 针对特性值或色调主要参数,省去低于 1 的小数前边的 0 (比如,.5 替代 0.5;_.5px 替代 _0.5px)。 十六进制值应当所有小写,比如,#fff。在扫描仪文本文档时,小书写符便于辨别,由于她们的方式更加容易于区别。 尽可能应用缩写方式的十六进制值,比如,用 #fff 替代 #ffffff。 为挑选器中的特性加上双引号,比如,input[type="text"]。仅有在一些状况下是可选择的,可是,以便编码的一致性,提议都再加双引号。 防止为 0 值特定企业,比如,用 margin: 0; 替代 margin: 0px;。

针对这儿采用的专业术语有疑惑吗?请参照 Wikipedia 上的 堆叠款式表 _ 英语的语法。

/* Bad CSS */
.selector, .selector_secondary, .selector[type=text] {
 padding:15px;
 margin:0px 0px 15px;
 background_color:rgba(0, 0, 0, 0.5);
 box_shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
/* Good CSS */
.selector,
.selector_secondary,
.selector[type="text"] {
 padding: 15px;
 margin_bottom: 15px;
 background_color: rgba(0,0,0,.5);
 box_shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;

有关的特性申明理应归到一组,并依照下边的次序排序:

Positioning Box model Typographic Visual

因为精准定位(positioning)能够从一切正常的文本文档流中清除原素,而且还能遮盖盒实体模型(box model)有关的款式,因而排到第一位。盒实体模型排到第二位,由于它决策了部件的规格和部位。

别的特性仅仅危害部件的內部(inside)或是不是危害前2组特性,因而排到后边。

详细的特性目录以及排序次序请参照 Recess。

.declaration_order {
 /* Positioning */
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z_index: 100;
 /* Box_model */
 display: block;
 float: right;
 width: 100px;
 height: 100px;
 /* Typography */
 font: normal 13px "Helvetica Neue", sans_serif;
 line_height: 1.5;
 color: #333;
 text_align: center;
 /* Visual */
 background_color: #f5f5f5;
 border: 1px solid #e5e5e5;
 border_radius: 3px;
 /* Misc */
 opacity: 1;
不必应用 @import

与 link 标识对比,@import 命令要慢许多,不仅提升了附加的恳求频次,还会继续造成不能意料的难题。取代方法有下列几类:

应用好几个 link 原素 根据 Sass 或 Less 相近的 CSS 预解决器将好几个 CSS 文档编译程序为一个文档 根据 Rails、Jekyll 或别的系统软件中出示过 CSS 文档合拼作用
 !__ Use link elements __ 
 link rel="stylesheet" href="core.css" 
 !__ Avoid @imports __ 
 style 
 @import url("more.css");
 /style 
新闻媒体查寻(Media query)的部位

将新闻媒体查寻放到尽量有关标准的周边。不必将她们装包放到一个单一款式文档中或是放到文本文档底端。假如你将她们分离了,未来总是被大伙儿忘却。下边得出一个典型性的案例。

.element { ... }
.element_avatar { ... }
.element_selected { ... }
@media (min_width: 480px) {
 .element { ...}
 .element_avatar { ... }
 .element_selected { ... }
带作为前缀的特性

当应用特殊生产商的含有作为前缀的特性时,根据缩近的方法,让每一个特性的值在竖直方位两端对齐,那样有利于几行编写。

在 Textmate 中,应用 Text → Edit Each Line in Selection (⌃⌘A)。在 Sublime Text 2 中,应用 Selection → Add Previous Line (⌃⇧↑) 和 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
 _webkit_box_shadow: 0 1px 2px rgba(0,0,0,.15);
 box_shadow: 0 1px 2px rgba(0,0,0,.15);
单行标准申明

针对只包括一条申明的款式,以便最易读性和有利于迅速编写,提议将句子放到同一行。针对含有好几条申明的款式,還是理应将申明分成几行。

那样做的重要要素是以便不正确检验 __ 比如,CSS 校检器强调在 183 行有英语的语法不正确。假如是单行一条申明,你也就不容易忽视这一不正确;假如是单行好几条申明得话,你也就要细心剖析防止漏掉不正确了。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
 display: inline_block;
 width: 16px;
 height: 15px;
 background_image: url(../img/sprite.png);
.icon { background_position: 0 0; }
.icon_home { background_position: 0 _20px; }
.ount { background_position: 0 _40px; }
缩写方式的特性申明

在必须显示信息地设定全部值的状况下,理应尽可能限定应用缩写方式的特性申明。普遍的乱用缩写特性申明的状况以下:

padding margin font background border border_radius

大部分分状况下,大家不用为缩写方式的特性申明特定全部值。比如,HTML 的 heading 原素只必须设定上、下面距(margin)的值,因而,在必需的情况下,只需遮盖这2个值便可以。过多应用缩写方式的特性申明会造成编码错乱,而且会对特性值产生无须要的遮盖进而造成出现意外的不良反应。

/* Bad example */
.element {
 margin: 0 0 10px;
 background: red;
 background: url("image.jpg");
 border_radius: 3px 3px 0 0;
/* Good example */
.element {
 margin_bottom: 10px;
 background_color: red;
 background_image: url("image.jpg");
 border_top_left_radius: 3px;
 border_top_right_radius: 3px;
Less 和 Sass 中的嵌套循环

防止不必要的嵌套循环。它是由于尽管你可以令其用嵌套循环,可是其实不寓意着应当应用嵌套循环。仅有在务必将款式限定在父原素内(也便是子孙后代挑选器),而且存有好几个必须嵌套循环的原素时才应用嵌套循环。

// Without nesting
.table thead tr th { }
.table thead tr td { }
// With nesting
.table thead tr {
 th { }
 td { }

编码是由人撰写并维护保养的。请保证你的编码可以自叙述、注解优良而且便于别人了解。好的编码注解可以传递左右文关联和编码目地。不必简易地严格执行部件或 class 名字。

针对较长的注解,尽量撰写详细的语句;针对一般性注释,能够撰写简约的语句。

/* Bad example */
/* Modal header */
.modal_header {
/* Good example */
/* Wrapping element for .modal_title and .modal_close */
.modal_header {
class 取名 class 名字中只有出現小书写符和破折号(dashe)(并不是下横线,都不是驼峰取名法)。破折号理应用以有关 class 的取名(相近于取名室内空间)(比如,.btn 和 .btn_danger)。 防止过多随意的缩写。.btn 意味着 button,可是 .s 不可以表述一切含意。 class 名字理应尽量短,而且实际意义确立。 应用更有意义的名字。应用有机构的或目地确立的名字,不必应用主要表现方式(presentational)的名字。 根据近期的父 class 或基本(base) class 做为新 class 的作为前缀。 应用 .js_* class 来标志个人行为(与款式相对性),而且不必将这种 class 包括到 CSS 文档中。

在为 Sass 和 Less 自变量取名是还可以参照上边列举的各类标准。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet_header { ... }
针对通用性原素应用 class ,那样有利于3D渲染特性的提升。 针对常常出現的部件,防止应用特性挑选器(比如,[class^="..."])。访问器的特性会遭受这种要素的危害。 挑选器要尽量短,而且尽可能限定构成挑选器的原素数量,提议不必超出 3 。 仅有在必需的情况下才将 class 限定在近期的父原素内(也便是子孙后代挑选器)(比如,不应用带作为前缀的 class 时 __ 作为前缀相近于取名室内空间)。

拓展阅读文章:

Scope CSS classes with prefixes Stop the cascade
/* Bad example */
span { ... }
.page_container #stream .stream_item .tweet .tweet_header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet_header .username { ... }
.tweet .avatar { ... }
编码机构 以部件为企业机构编码段。 制订一致的注解标准。 应用一致的空白页符将编码隔开成块,那样有利于扫描仪很大的文本文档。 假如应用了好几个 CSS 文档,将其依照部件并非网页页面的方式拆分,由于网页页面会被资产重组,而部件总是被移动。
 * Component section heading
.element { ... }

* Sometimes you need to include optional context for ponent. Do that up here if it's important enough. .element { ... } /* ponent or modifer */ .element_heading { ... }
编写器配备

将你的编写器依照下边的配备开展设定,以免普遍的编码不一致和差别:

用2个空格符替代制表符(soft_tab 即用空格符意味着 tab 符)。 储存文档时,删掉尾部的空白页符。 设定文档编号为 UTF_8。 在文档末尾加上一个空白页行。

参考文本文档并将这种配备信息内容加上到新项目的 .editorconfig 文档中。比如:Bootstrap 中的 .editorconfig 案例。大量信息内容请参照 about EditorConfig。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:html网页模板