前言
对于css文件而言，选择器的写法有它的讲究，如——
1> 不要用ID选择器
2> 不要用通配符*选择器
3> 选择器的层级
......
对于属性值的写法也有他的讲究，如——
1> 复合属性，如font、background、margin、padding等
2> 颜色、单位、hack、css3属性等
......
大家往往忽略一点，便是属性的书写顺序。
1> Positioning - 定位属性
2> Box-model - 盒模型属性
3> Typography - 排版属性
4> Visual - 视觉属性
5> Misc - 其他属性
使用recess实现css属性顺序重置
举一个例子，test.css中——
.test {
color: green;
float: left;
}
color是排版属性，float是盒模型属性，float应该在前。我们用recess检测，会看到——
当然，你也可以关掉这个功能，但不提倡，个人认为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属性顺序的编写，大家不必在开发的过程当中进行留意，可以在一键部署的环节中去做。从而提高样式的解析效率。
当然，你也可以通过更改里面的源码来得到你所需要的样式规则。再当然，主要是学习里面的设计思想，自己开发去满足自己的需求。
前端开发--css属性书写顺序
css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...
css属性编写顺序+mysql基本操作+html细节(个人笔记)
css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...
HTML编码规则、CSS属性声明顺序--简介
From AmazeUI:http://amazeui.org/getting-started/html-css-guide HTML 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码 ...
Mozilla推荐的CSS属性书写顺序及命名规则
传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...
CSS属性书写顺序及命名规则
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...
一篇通俗易懂的CSS层叠顺序与层叠上下文研究
网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...
CSS书写顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...
CSS 属性 - position讲解
postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...
CSS属性(常用的属性)
CSS属性(常用的属性)http://www.w3school.com.cn/cssref/index.asp 一:文本与字体属性 1.字体属性 (1):font-size:字体的大小(例如:font ...
随机推荐
oracle is not in the sudoers file. This incident will be reported.
准备把OS的root禁用了,所以其他用户要执行使用root执行的操作时,需要使用sudo. 在没有配置sudo的时候,执行sudo会出现类似以下的报错: [oracle@test ~]$ sudo / ...
linux设备驱动归纳总结(四)：1.进程管理的相关概念【转】
本文转载自;http://blog.chinaunix.net/uid-25014876-id-64866.html linux设备驱动归纳总结(四):1.进程管理的相关概念 xxxxxxxxxxxx ...
获取WebView加载HTML时网页中的内容
main.xml如下: [html] view plaincopy
api-gateway实践(15)API网关的待改进点 20171207
一.API网关能力 API网关负责服务请求路由.组合及协议转换.客户端的所有请求都首先经过API网关,然后由它将请求路由到合适的微服务.API网关的客户端通过统一的网关接入微服务,在网关层处理所有的非 ...
Notepad++远程连接Linux系统
首先在官网下载 https://notepad-plus-plus.org/news/notepad-7.6.4-released.html 在命令行数输入ifconfig 查看自己的Linux的ip ...
C# 文件上传下载功能实现 文件管理引擎开发
Prepare 本文将使用一个NuGet公开的组件技术来实现一个服务器端的文件管理引擎,提供了一些简单的API,来方便的实现文件引擎来对您自己的软件系统的文件进行管理. 在Visual Studio ...
黄聪：xampp运行MySQL shutdown unexpectedly解决方案
相信不少喜欢WordPress的朋友和我一样,会用xampp在本地搭建一个网站学习调试,但是在用的过程中也会遇到些麻烦,毕竟我们都是小白,今天就分享一个xampp运行MySQL数据时出现 Error: ...
netty(一) netty有哪几部分构成
netty netty是一个支持高并发的非阻塞I/O框架. Channel Channel 是 NIO 基本的结构.它代表了一个用于连接到实体如硬件设备.文件.网络套接字或程序组件,能够执行一个或多个 ...
Kattis之旅——Perfect Pth Powers
We say that x is a perfect square if, for some integer b, x = b2. Similarly, x is a perfect cube if, ...
Mac 升级后idea执行git命令报错xcrun: error: invalid active developer path的解决办法
报错 xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun ...
1899
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
