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

   
   
   书写顺序

二 使用缩写属性

1. 比如: padding margin background 等

2. 去掉小数点前的"0"

   
   
   去掉小数点前的"0"

3. 简写命名 一定要让别人看明白

   
   
   名称不规范

三 css选择器命名规范

1. 长名称或者词组可是使用中横线来为选择器命名
2. 不建议使用"_" 下划线来命名css选择器,为什么呢?
   1. 输入的时候少按一个shift 键;
   2. 浏览器兼容问题(比如是用哪个_tips的选择器命名,在IE6是无效的,但是现在大部分都不兼容IE6了)
   3. 能良好的区分js变量命名(js变量命名是用"_")
3. 不要随意使用id id在js是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外,id的优先级大于class.所以id应该按需使用,不能滥用.

4. 为选择器添加状态前缀(可不用)
   有时候可给选择器添加一个表示状态的前缀,让语义更明了,比如:

   
   
   添加了is前缀

四 常用的css命名规则

名称	命名
头	header
内容	content/container
尾	footer
导航	nav
侧栏	slidebar
栏目	column
页面外围控制整体布局宽度	wrapper
左中右	left center right
登录条	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

五 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

注意事项

• 一律小写
• 尽量用英文
• 不加中杠和下划线
• 尽量不缩写,除非一看就明白的单词

六 css样式表文件名

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

面向属性命名-张鑫旭
这个面向属性命名,也是容纳了很多的属性,大部分都存在其中,样式的复用性很高,将很多的样式都分离出去了.