css命名和书写规范

前言

在项目开发中对于css名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下...

1.命名规则说明

1. 所有的命名最好都小写
2. 属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"
3. 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4. 空元素要有结束的tag或于开始的tag后加上"/"
5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
6. 给每一个表格和表单加上一个唯一的、结构标记id
7. 给图片加上alt标签
8. 尽量不缩写，除非一看就明白的单词，不知道的用翻译软件翻译一下
9. 无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名
10. 如果名字过长可以用中横线但是拒绝使用下划线（IE6以可能出现解析错误，为了区分JavaScript变量名）

bad

.miantitle {
    color: #e3c;
  }
  .mian_title {
    color: #e3c;
  }

good

.mian-title {
    color: #e3c;
  }

11.属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；margin 和 padding 相反，需要使用简写。更多详细规则请参考此文章
bad

.list-box {
    border-top-style: none;
    font-family: aerif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
  }

good

.list-box {
    border-top: 0;
    font: 100%/1.6 aerif;
    padding: 0 1em 2em;
  }

12.去掉小数点后面的0
bad

font-size: 0.8em;

good

font-size: .8em;

13.十六进制颜色代码缩写，并尽量用小写
bad

color: #eebbcc;

good

color: #ebc;

14.不要随意用id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用
15.可以为选择器加状态前缀
bad

.withdrawal {
    background-color: #ccc;
  }

good

.is-withdrawal {
    background-color: #ccc;
  }

16.项目命名的时候采用这种方式my_project_name
17.媒体查询规则靠近与他们相关的规则，不要将他们一起放到独立的样式文件中，具体可参考此文章
18.更多详细css书写规范可参考此文章1和此文章2
19.scss书写时应注意的问题可以参考此文章

2.命名参考表

网页外层

最外层：wrapper (页面外围控制整体布局宽度)
头部：header
主体内容（中部）：main
左侧布局：main-left
右侧布局：main-right
导航条：nav
网页中部主体：content
底部：footer
菜单：menu

页面结构

#wrapper 页面外围控制整体布局宽度
#container或#content 容器,用于最外层
#head, #header 页头部分
#foot, #footer 页脚部分
#sidebar 侧边栏
#column 栏目
#left,#right,#center 左右中

导航

#nav 导航
#miannav 主导航
#subnav 子导航
#topnav 顶导航
#sidenar 边导航
#leftsidenav 左导航
#rightsidenav 右导航
#menu 菜单
#submenu 子菜单
#title 标题
#summary 摘要

功能

#logo 标志
#banner 广告
#login 登录
#loginbar 登录条
#regsiter 注册
#search 搜索
#shop 功能区
#title 标题
#joinus 加入
#status 状态
#btn 按钮
#s 滚动
#tab 标签页
#list 文章列表
#msg 提示信息
#current 当前的
#tips 小技巧
#icon 图标
#note 注释
#guild 指南
#service 服务
#hot 热点热门
#news 新闻
#download 下载
#vote 投票
#partner 合作伙伴
#friendlink 友情链接
#copyright 版权
#searchInput 搜索输入框
#search-output 搜索输出
#search-results 搜索结果
#branding 商标
#siteinfo 网站信息
#siteinfoLegal 法律声明
#siteinfoCredits 信誉
#arrow 箭头
#sitemap 网站地图
#homepage 首页
#subpage 二级页面子页面
#toolbar 工具条
#drop 下拉
#dropmenu 下拉菜单
需要用 class的命名
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条
.products 产品
.products_prices 产品价格
.products-description 产品描述
.products_review 产品评论
.editor_review 编辑评论
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
..blog 博客
.forum 论坛

3.css文件命名

global.css 全局
全局样式为全站公用，为页面样式基础，页面中必须包含
master.css style.css 主要的
module.css 模块
产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用
base.css 基本共用
layout.css 布局，版面
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中
themes.css 主题
实现换肤功能时应用
columns.css 专栏
font.css 文字，字体
forms.css 表单
mend.css 补丁
基于以上样式进行的私有化修补
print.css 打印
style.css 私有
独立页面所使用的样式文件，页面中必须包含

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

bad

.example {
    color: red;
    z-index: -1;
    background-color: #9e0;
    display: inline-block;
    font-size: 1.5em;
  }

good

.example {
    z-index: -1;
    display: inline-block;
    font-size: 1.5em;
    color: red;
    background-color: #9e0;
  }

感谢

此文我参考了如下作者写的文章，在此特别提出感谢，如果你在阅读我写的文章中有任何问题可以查阅如下链接：

• DIV+CSS规范命名大全集合
• css命名规则【豆瓣小组】
• 如何规范 CSS 的命名和书写？【知乎】
• 团队规范文档【腾讯alloyteam前端团队】
• css编码规范【百度fex前端团队】
• nec规范【网易前端团队】
• 精简高效的CSS命名准则/方法【张鑫旭】
• 无废话网页重构系列【大象】