当我们有人找我们检测项目或者修改某项目的模块功能,在查看项目源代码的时候,你会不会对那些毫无意义可言的 id(或class)以及那些不规范的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
指南:guide
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright
小编会不定时更新前端相关的知识,有兴趣的话欢迎大家加群142991222一起讨论交流学习。
注意事项:
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文件结构目录:
重置浏览器默认样式
全局常用 CSS 样式
表单及表单元素
页面布局以及通用的区块样式
列表样式
其他特定功能块
CSS 样式模块的格式示例:
Name:模块名称
Level:级别(Global, Channel, Function)
Dependent:依赖关系,该模块必须依赖于何种模块
Sample:用法示例,或指出改模块所作用的直接页面
Explain:附加说明
Author:创建者 日期(两位数年月日时)
Last Modify:最终修改者 日期(两位数年月日时)
CSS注释规范:
- 文件顶部注释(推荐使用)
/*
@description: 中文说明
@author: name
@update: name (2015-11-16 08:16)
*/
- 模块注释(模块注释必须单独写在一行)
/* module: module1 by * */
…
/* module: module2 by * */
- 单行注释与多行注释
/* this is a short comment */
单行注释可写在单独一行,也可写在行尾,注释中每行长度不超过40个汉字(80个英文字符)
/*
this is comment line 1.
this is comment line 2.
*/
多行注释必须写在单独行内
- 特殊注释
/* TODO: xxxx by name */
/* BUGFIX: xxxx by name */
用于标注修改、待办等信息
- 区块注释
/* Header */
/* Footer */
/* Gallery */
对一个代码区块注释(可选),将样式语句分区块并在新行中对其注释
CSS 写作注意事项:
- 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格;
例如: .class { width: 400px; height: 300px; }
- 属性的书写顺序:
针对特殊浏览器的属性,应写在标准属性之前;
例如: -webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式;
3. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称;
例如: .cl -> Clearfix
避免使用各种 CSS Hack,如需对 IE 进行特殊定义,请自行查阅“关于 CSS Hack 的说明”;
勿使用冗余低效的 CSS 写法,例如: ul li a span { … }
慎用 !important 。其次,避免在CSS中使用@import,嵌套不要超过一层;
建议使用在 class/id 名称中的词语:
表示状态:a->active
表示结构:h->header,c->content,f->footer
表示区域:mn->main,sd->side,nv-navigation,mu->menu
表示样式:l-list,tab,p_pop
8. 文件名、文件编码及文件大小;
文件名应该由小写字母、数字、中划线组成;
文件建议用UTF-8编码,使用UTF-8(非BOM),在HTML中指定UTF-8编码,在CSS中则不需要特别指定(因为默认就是UTF-8);
单个CSS文件避免过大(建议少于300行);
9. 开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理;
PS:关于 CSS Hack 的说明
所有 IE浏览器适用: .ie_all .foo { … }
IE6 专用: .ie6 .foo { … }
IE7 专用: .ie7 .foo { … }
IE8 专用: .ie8 .foo { … }
10.页面禁用鼠标选定文字
Hello, World!