前端CSS规范整理 命名规范的整理

运用有含义的或通用的ID和class命名：ID和class的命名应反映该元素的功用或运用通用称号，而不要用笼统的不流畅的命名。反映元素的运用意图是首选；运用通用称号代表该元素不表特定含义，与其同级元素无异，通常是用于辅佐命名；运用功用性或通用的称号能够更适用于文档或模版改变的状况。
/* 不引荐: 无含义 */ #yee-1901 {} 
/* 不引荐: 与款式有关 */ .button-green {}.clear {} 
/* 引荐: 特别性 */ #gallery {}#login {}.video {} 
/* 引荐: 通用性 */ .aux {}.alt {} 
常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等
ID和class命名越简略越好，只需满意表达寓意。这样既有助于知道，也能进步代码功率。
/* 不引荐 */ #navigation {}.atr {} 
/* 引荐 */ #nav {}.author {} 
类型选择器防止一起运用标签、ID和class作为定位一个元素选择器；从功用上思考也应尽量削减选择器的层级。
/* 不引荐 */ul#example {}div.error {} 
/* 引荐 */#example {}.error {} 
命名时需求注意的点：
规矩命名中，一概选用小写加中划线的办法，不答应运用大写字母或 _ 
命名防止运用中文拼音，大概选用更简明有语义的英文单词进行组合 
命名注意缩写，可是不能盲目缩写，详细请拜见常用的CSS命名规矩 
不答应通过1、2、3等序号进行命名 
防止class与id重名 
id用于标识模块或页面的某一个父容器区域，称号有必要仅有，不要随意新建id 
class用于标识某一个类型的方针，命名有必要要言不烦。 
尽可能进步代码模块的复用，款式尽量用组合的办法 
规矩称号中不大概包括色彩（red/blue）、定位（left/right）等与详细显现作用有关的信息。大概用含义命名，而不是款式显现成果命名。 
1、常用id的命名：
(1)页面规划
容器: container 
页头：header 
内容：content/container 
页面主体：main 
页尾：footer 
导航：nav 
侧栏：sidebar 
节目：column 
页面外围操控全体规划宽度：wrapper 
左右中：left right center 
(2)导航
导航：nav 
主导航：mainbav 
子导航：subnav 
顶导航：topnav 
边导航：sidebar 
左导航：leftsidebar 
右导航：rightsidebar 
菜单：menu 
子菜单：submenu 
标题: title 
摘要: summary 
(3)功用
象征：logo 
广告：banner 
登入：login 
登录条：loginbar 
注册：regsiter 
查找：search 
功用区：shop 
标题：title 
参加：joinus 
状况：status 
按钮：btn 
翻滚：scroll 
标签页：tab 
文章列表：list 
提示信息：msg 
当时的: current 
小窍门：tips 
图标: icon 
注释：note 
攻略：guild 
效劳：service 
热门：hot 
新闻：news 
下载：download 
投票：vote 
合作伙伴：partner 
友情连接：link 
版权：copyright 
2、常用class的命名：
(1)色彩:运用色彩的称号或许16进制代码,如
.red { color: red; } 
.f60 { color: #f60; } 
.ff8600 { color: #ff8600; } 
(2)字体巨细,直接运用”font+字体巨细”作为称号,如
.font12px { font-size: 12px; } 
.font9pt {font-size: 9pt; } 
(3)对齐款式,运用对齐方针的英文称号,如
.left { float:left; } 
.bottom { float:bottom; } 
(4)标题栏款式,运用”种类+功用”的办法命名,如
.barnews { } 
.barproduct { }