如何规范书写css，增加代码的阅读体验

当我们在进行网页前端开发的过程中，按照一个良好的css规范编写css，这样不仅可以提高代码的阅读体验；也可以在出现错误时，迅速的查找出错地点，方便改正。这里设计达人网总结一个CSS书写规范、CSS书写顺序供大家参考，这些是参考了国外一些文章以及我的个人经验总结出来，我想对写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书写规范使用CSS缩写属性

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

去掉小数点前的“0”

简写命名

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

16进制颜色代码缩写

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

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；

浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）

能良好区分JavaScript变量命名（JS变量命名是用“_”）

不要随意使用id

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

为选择器添加状态前缀

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

CSS命名规范（规则）常用的CSS命名规则

头（header），内容（content/container）尾（footer），导航（nav），侧栏（sidebar），栏目（column），页面外围控制整体佈局宽度（wrapper），左右中（left right center），登录条（loginbar），标志（logo），广告（banner）页面主体（main），热点（hot）,新闻（news）,下载（download）,子导航（subnav），菜单（menu）,子菜单（submenu）,搜索（search），友情链接（friendlink）,页脚（footer）,版权（copyright）,滚动（scroll）,内容（content）,标签（tags）,文章列表（list）,提示信息（msg）,小技巧（tips）,栏目标题（title）,加入（joinus）,指南（guide）,服务（service）,注册（regsiter）,状态（status）,投票（vote）,合作伙伴（partner）

注释的写法:
/* Header */内容区/* End Header */

id的命名:

1)页面结构

容器: container，页头：header，内容：content/container，页面主体：main，页尾：footer，导航：nav，侧栏：sidebar，栏目：column，页面外围控制整体佈局宽度：wrapper，左右中：left right center

(2)导航

导航：nav，主导航：mainnav，子导航：subnav，顶导航：topnav，边导航：sidebar，左导航：leftsidebar，右导航：rightsidebar，菜单：menu，子菜单：submenu，标题: title，摘要: summary

(3)功能

标志：logo，广告：banner，登陆：login，登录条：loginbar，注册：register，搜索：search，功能区：shop，标题：title，加入：joinus，状态：status，按钮：btn，滚动：scroll，标籤页：tab，文章列表：list，提示信息：msg，当前的: current，小技巧：tips，图标: icon，注释：note，指南：guild，服务：service，热点：hot，新闻：news，下载：download，投票：vote，合作伙伴：partner，友情链接：link，版权：copyright

注意事项::
1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。

CSS样式表文件命名

主要的（master.css） ，模块（module.css） ，基本共用 （base.css），布局、版面 （layout.css），主题（ themes.css），专栏（columns.css） ，文字（ font.css），表单 （forms.css），补丁（ mend.css），打印 （print.css）

以上是如何规范书写css，增加代码的阅读体验的详细内容。更多信息请关注PHP中文网其他相关文章！