设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 807|回复: 0

[其他] 推荐使用的CSS书写规范、顺序

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-8-18 09:02:52 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
推荐使用的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等)

20130927193034452647.PNG

CSS书写规范

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

20130927193034923603.PNG

去掉小数点前的“0”
20130927193034527067.PNG


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

20130927193034259009.PNG

16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,精简代码从我做起。

20130927193034581716.PNG

连字符CSS选择器命名规范 


1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器,为什么呢?

输入的时候少按一个shift键;
浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的)
能良好区分JavaScript变量命名(JS变量命名是用“_”)
20130927193034316068.PNG

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

为选择器添加状态前缀

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

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-3 23:31

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表