如何规范书写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命名规则

头（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社区 其它相关文章！