CSS书写规范
一、CSS书写顺序
1.位置属性(position,top,right,z-index,display,float等)
2.大小(width,height,padding,margin)
3.文字系列(font,line-height,letter-spacing,color-text-align等)
4.背景(background,border等)
5.其他(animation,transition等)

二、CSS书写规范
1.使用CSS缩写属性
CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。

2.去掉小数点前的“0”

3.简写命名
很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

4.16进制颜色代码缩写
有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

5.连字符CSS选择器命名规范
1)长名称或词组可以使用中横线来为选择器命名。
2)不建议使用“_”下划线来命名CSS选择器,为什么呢?
- 输入的时候少按一个shift键
- 浏览器兼容问题(比如使用_tips的选择器命名,在IE6是无效的)
- 能良好区分JavaScript变量命名(JS变量命名是用“_”)

6.不要随意使用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。

7.为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了“.is-”前缀。

PS:文章转载自nzbin的博客,看到很不错,学习下吧,利己利人!
CSS书写规范的更多相关文章
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- 推荐大家使用的CSS书写规范、顺序(转载)
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...
随机推荐
- javascript 手势缩放 旋转 拖动支持:hammer.js
原文: https://cdn.rawgit.com/hammerjs/hammer.js/master/tests/manual/visual.html /*! Hammer.JS - v2.0.4 ...
- DeepLearning之路 (五) CNN
自今年七月份以来,一直在实验室负责卷积神经网络(Convolutional Neural Network,CNN),期间配置和使用过theano和cuda-convnet.cuda-convnet2. ...
- Android studio打开之后 cannot load project: java.lang.NUllpointerException
参考来源:http://bbs.csdn.net/topics/391014393 关闭网络,重新打开Android studio就好了.(但是原因不清楚是为什么?) Internal error. ...
- [SHTSC 2014] 信号增幅仪
最小覆盖圆算法.看着题解半蒙半抄的搞过去了… 主要参考以下http://blog.csdn.net/acdreamers/article/details/9406735http://blog.csdn ...
- CDH5.4.5运行Phoenix导入CSV文件
1.安装phoenix 在界面上设置Phoenix的parcel包: http://52.11.56.155:7180/cmf/settings?groupKey=config.scm.parcel. ...
- C# 大小写转换,方便index of
ToUpper:小写转大写ToLower:大写转小写 例: string str=120cm*150g/m2;从中取出120和150,但是又要规避大小写问题,这时候就需要将str转换为大写,然后ind ...
- listview指定某item的点击效果
需求:listview的某些item能够点击,需要点击效果,有些item不能点击,需要屏蔽点击效果. 实现: 1.layout: <ListView android:id="@+id/ ...
- MFC-01-Chapter01:Hello,MFC---1.1 Windows 编程模型
1.1 Windows编程模型 为传统的操作系统编写的程序使用的是过程化模型,即程序从头到尾按顺序执行.例如C程序,从main函数入口开始执行,中间调用不同的函数一直到程序结束返回,这种过程是程序本身 ...
- extjs之apply
ext.apply(Ext.Form.VTypes,{}) {}里面的内容如下: { password:function (val.field) { if(field.initialPassField ...
- 在非spring组件中注入spring bean
1.在spring中配置如下<context:spring-configured/> <context:load-time-weaver aspectj-weaving=&q ...