标准化css属性顺序

前言

对于css文件而言,选择器的写法有它的讲究,如——

1> 不要用ID选择器
2> 不要用通配符*选择器
3> 选择器的层级
......

对于属性值的写法也有他的讲究,如——

1> 复合属性,如font、background、margin、padding等
2> 颜色、单位、hack、css3属性等
......

大家往往忽略一点,便是属性的书写顺序。

来自http://mdo.github.io/code-guide/,它所提倡的css属性顺序如下——

1> Positioning - 定位属性
2> Box-model - 盒模型属性
3> Typography - 排版属性
4> Visual - 视觉属性
5> Misc - 其他属性

具体的顺序,参见https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js

使用recess实现css属性顺序重置

官网:http://twitter.github.io/recess/,依赖于node及npm。

举一个例子,test.css中——

.test {
    color: green;
    float: left;
}

color是排版属性,float是盒模型属性,float应该在前。我们用recess检测,会看到——

它会告诉你正确的属性应该是什么。它的判定标准,严格按照https://github.com/twitter/recess/blob/master/lib/lint/strict-property-order.js而来。

当然,你也可以关掉这个功能,但不提倡,个人认为recess里面最大的魅力就在于能够检测属性顺序。

OK,我们向前一步,现在呢,我不想进行语法检测,我直接将这个test.css文件,编译之后,输出我期望的属性顺序的css文件(我这里命名为test-product.css)。那么键入如下命令——

recess [path to old file] --compile > [path to new file]

对应的结果——

.test {
    float: left;
    color: green;
}

其他

当然,recess能做的事情不止于此,它的详细介绍,可以看看http://www.sitepoint.com/optimizing-css-stylesheets-recess/,如对less编译的支持,压缩,jslint检测规则的添加等,都还不错。

总之,对于css属性顺序的编写,大家不必在开发的过程当中进行留意,可以在一键部署的环节中去做。从而提高样式的解析效率。

当然,你也可以通过更改里面的源码来得到你所需要的样式规则。再当然,主要是学习里面的设计思想,自己开发去满足自己的需求。

时间: 2024-10-21 14:45:14

标准化css属性顺序的相关文章

前端开发--css属性书写顺序

css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; float: ; clear: ; /*定位属性*/ position: ; top: ; right: ; bottom: ; left: ; z-index: ; /*盒模型属性*/ width: ; min-width: ; max-width: ; height: ; min-height

整理推荐的CSS属性书写顺序

一. Mozilla 建议CSS规则 <span style="font-family:Microsoft YaHei;">/* Suggested order:    * display    * list-style    * position    * float    * clear    * width    * height    * margin    * padding    * border    * background    * color    * 

Mozilla推荐的CSS属性书写顺序及命名规则

传说中的Mozilla推荐 Java代码   /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-alig

CSS属性

CSS样式属性 一.字体 1.font-family:Tahoma,Arial,"Hiragino Sans GB";字体,第一种字体不能显示时,用第二种字体 2.font-size:xx-small or 10px字体大小:绝对大小:xx-small.x-small.medium.large.x-large.xx-large.x-large.xx-l相对大小:large smaller 使用数字和度量单位绝对单位:px:显示器像素个数mm.cm.in:毫米 厘米 英寸,使用这类单位,

CSS属性之字体(Font)

CSS属性之字体(Font) font:[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ]  复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变,其他关键字的值放到这两个值的前面,顺序可以随意打乱. 可以在字号值(font-siz

CSS属性(常用的属性)

CSS属性(常用的属性)http://www.w3school.com.cn/cssref/index.asp 一:文本与字体属性 1.字体属性 (1):font-size:字体的大小(例如:font-size:14px)(em当前对象内文本字体大小 pt绝对长度单位(多少个点的单位)px相对长度单位(像素)) (2):font-family:字体的类型(例如:font-family:"隶书","宋体",Arial,"Times New Roman&quo

CSS属性简写汇总

CSS代码编写的过程中,代码数量非常庞大,许多属性会被反复使用,这样来来回回地敲打同样的属性名称会占用不少的时间.作为一名优秀的web前端人员,应当了解记忆各种属性的简写方式,用以提高自身的工作效率,缩减代码数量,增强可读性.作为一名刚接触不久的初学者,在网上搜集资料,整理了常用属性的简写模式,供大家参考. 1.颜色color简写 在颜色值采用16进制,且每两位的值相同,可以简写一半. 1 color : #113366 ; 简写为 1 color : #136 ; 2.边距margin和pad

常用的CSS属性

CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位:PX.PD.EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-

整理 W3CSchool 常用的CSS属性列表

近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O. 摘选自:http://www.w3cschool.com.cn/ 表格最右列的数字标识支持的CSS最低版本. 目录: 01. CSS背景属性(Background) 02. CSS边框属性(Border和Outline) 03. CSS文本属性(Text) 04. CSS字体属性(Font) 05. CSS外边距属性(Margin) 06. CSS内边距属性(Padding) 07. CSS列表属性(