Ahead of All

来自一个周末大清早起来带本科小朋友做通电试验的可怜孩子Θ◇Θ

最近正在辛苦码网站,参考了几个主题的css,不能不说这个语言真的是极其简单易懂(那乱七八糟一堆属性什么鬼!!前面定义过的类怎么后边又出现了!!!)毕竟css这个语言没有一个官方的书写规范,所以一切看个人。

本文本着不反人类,便于理解的要求,根据网上资料整理,是一套现在通用性较高命名及书写规范。

较为正规的手册可参考:
网易NEC : 更好的CSS样式解决方案
百度Baidu EFE team : CSS编码规范

CSS书写规范

1. 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等)

2. 使用CSS缩写属性

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

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

4. 简写命名

简写虽好,可读第一!!

5. 16进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。(其实个人不太推荐这种方法,6位16进制颜色辨认度会更好

6. 连字符CSS选择器

  1. 长名称或词组可以使用中横线来为选择器命名。
  2. 不建议使用"_"下划线来命名CSS选择器。
    输入的时候少按一个shift键;
    浏览器兼容问题 (比如使用_tips的选择器命名,在IE6是无效的);
    能良好区分JavaScript变量命名(JS变量命名是用"_"或者驼峰)

7. 不要随意使用ID

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

8. 为选择器添加状态前缀

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

CSS命名规范

1. 常用的CSS命名规则

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

2. 分块注释

分块内容做到有头有尾,添加注释~

/* Header */
内容区
/* End Header */

3. ID的命名

页面结构
属性 命名 属性 命名
容器 container 导航 nav
页头 header 侧栏 sidebar
内容 content/container 栏目 column
页面主体 main 页面外围整体布局 wrapper
页尾 footer 左 中 右 left center right
导航结构
导航 nav 右导航 rightbar
主导航 mainnav 菜单 menu
子导航 subnav 子菜单 submenu
顶导航 topnav 标题 title
边导航 sidebar 摘要 summary
左导航 leftbar
功能菜单
标志 logo 提示信息 msg
广告 banner 当前的 current
登陆 login 小技巧 tips
登陆条 loginbar 图标 icon
注册 register 注释 note
搜索 search 指南 guide
功能区 shop 服务 service
标题 title 热点 hot
加入 joinus 新闻 news
状态 status 下载 download
按钮 btn 投票 vote
滚动 scroll 合作伙伴 partner
标签页 tab 友情链接 link
文章列表 list 版权 copyright

4. 注意事项

  1. 所有类名,属性,ID名字一律小写;
  2. 使用英文;
  3. 不使用中横和下划线;
  4. 尽量不缩写,除非一看就明白的单词。

CSS文件命名规范

主要的 master.css
模块 module.css
基本共用 base.css
布局、版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
WordPress 里面可以统一写在style.css里面,然后注释分块。