Bootstrap CSS 编码规范之属性声明顺序

声明顺序

相关的属性声明应当归为一组，并按照下面的顺序排列：

Positioning
Box model
Typographic
Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

.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;
}
关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap CSS 编码规范之属性声明顺序相关推荐

Bootstrap CSS 编码规范之简写形式的属性声明
简写形式的属性声明在需要显式地设置所有值的情况下,应当尽量限制使用简写形式的属性声明.常见的滥用简写属性声明的情况如下: padding margin font background border ...
Bootstrap HTML编码规范之属性顺序
属性顺序为了确保代码的易读性,HTML 属性应当按照以下顺序依次排列: class id, name data-* src, for, type, href, value title, alt ro ...
Bootstrap CSS 编码规范之单行规则声明
单行规则声明对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行.对于带有多条声明的样式,还是应当将声明分为多行. 这样做的关键因素是为了错误检测.如,CSS 校验器指出在 18 ...
Bootstrap CSS 编码规范之带前缀的属性
带前缀的属性当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑. /* Prefixed properties */ .selector { -we ...
Bootstrap CSS编码规范之选择器使用规范
选择器选择器应该遵守以下规范: 对于通用元素使用 class ,这样利于渲染性能的优化. 对于经常出现的组件,避免使用属性选择器(如,[class^="..."]).浏览器的性能 ...
Bootstrap CSS编码规范之代码组织规范
代码组织应该按照以下规范组织代码: 以组件为单位组织代码段. 制定一致的注释规范. 使用一致的空白符将代码分隔成块,这样利于扫描较大的文档. 如果使用了多个 CSS 文件,将其按照组件而非页面的形式 ...
Bootstrap CSS 编码规范之Class 命名规范
Class 命名规范 Class 应该遵守以下命名规范: class 名称中只能出现小写字符和破折号(不是下划线,也不是驼峰命名法).破折号应当用于相关 class 的命名(类似于命名空间)(如,.b ...
Bootstrap CSS 编码规范之注释
注释代码是由人编写并维护的.请确保你的代码能够自描述.注释良好,且易于他人理解.好的代码注释能够传达上下文关系和代码意图.不要简单地重复组件或 class 的名称. 对于较长的注释,务必书写完整的句 ...
Bootstrap CSS 编码规范之Less 和 Sass 中的操作符
Less 和 Sass 中的操作符为了提高可读性,在圆括号中的数学表达式的数值.变量和操作符之间,均添加一个空格. // Bad example .element { margin: 10px ...

Bootstrap CSS 编码规范之属性声明顺序

声明顺序

Bootstrap CSS 编码规范之属性声明顺序相关推荐

最新文章

热门文章