CSS规范 - 分类方法
CSS规范 - 优化方案
/* 这是某个模块 */
.m-nav{}/* 模块容器 */
.m-nav li,.m-nav a{}/* 先共性 优化组合 */
.m-nav li{}/* 后个性 语义化标签选择器 */
.m-nav a{}/* 后个性中的共性 按结构顺序 */
.m-nav a.a1{}/* 后个性中的个性 */
.m-nav a.a2{}/* 后个性中的个性 */
.m-nav .z-crt a{}/* 交互状态变化 */
.m-nav .z-crt a.a1{}
.m-nav .z-crt a.a2{}
.m-nav .btn{}/* 典型后代选择器 */
.m-nav .btn-1{}/* 典型后代选择器扩展 */
.m-nav .btn-dis{}/* 典型后代选择器扩展（状态） */
.m-nav .btn.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */
.m-nav .m-sch{}/* 控制内部其他模块位置 */
.m-nav .u-sel{}/* 控制内部其他元件位置 */
.m-nav-1{}/* 模块扩展 */
.m-nav-1 li{}
.m-nav-dis{}/* 模块扩展（状态） */
.m-nav.z-dis{}/* 作用同上，请二选一（如果可以不兼容IE6时使用） */
布局（.g-）
语义
命名
简写
文档
doc
doc
头部
head
hd
主体
body
bd
尾部
foot
ft
主栏
main
mn
主栏子容器
mainc
mnc
侧栏
side
sd
侧栏子容器
sidec
sdc
盒容器
wrap/box
wrap/box
模块（.m-）、元件（.u-）
语义
命名
简写
导航
nav
nav
子导航
subnav
snav
面包屑
crumb
crm
菜单
menu
menu
选项卡
tab
tab
标题区
head/title
hd/tt
内容区
body/content
bd/ct
列表
list
lst
表格
table
tb
表单
form
fm
热点
hot
hot
排行
top
top
登录
login
log
标志
logo
logo
广告
advertise
ad
搜索
search
sch
幻灯
slide
sld
提示
tips
tips
帮助
help
help
新闻
news
news
下载
download
dld
注册
regist
reg
投票
vote
vote
版权
copyright
cprt
结果
result
rst
标题
title
tt
按钮
button
btn
输入
input
ipt
功能（.f-）
语义
命名
简写
浮动清除
clearboth
cb
向左浮动
floatleft
fl
向右浮动
floatright
fr
内联块级
inlineblock
ib
文本居中
textaligncenter
tac
文本居右
textalignright
tar
文本居左
textalignleft
tal
垂直居中
verticalalignmiddle
vam
溢出隐藏
overflowhidden
oh
完全消失
displaynone
dn
字体大小
fontsize
fs
字体粗细
fontweight
fw
皮肤（.s-）
语义
命名
简写
字体颜色
fontcolor
fc
背景
background
bg
背景颜色
backgroundcolor
bgc
背景图片
backgroundimage
bgi
背景定位
backgroundposition
bgp
边框颜色
bordercolor
bdc
状态（.z-）
语义
命名
简写
选中
selected
sel
当前
current
crt
显示
show
show
隐藏
hide
hide
打开
open
open
关闭
close
close
出错
error
err
不可用
disabled
dis
CSS规范 - 典型错误
不符合NEC规范的选择器用法
.class{}不要以一个没有类别的样式作为主选择器，这样的选择器只能作为后代选择器使用，比如.m-xxx .class{}。
.m-xxx div{}不要以没有语义的标签作为选择器，这会造成大面积污染，除非你可以断定现在或将来你的这个选择器不会污染其他同类。
.g-xxx .class{}不要在页面布局中使用后代选择器，因为这个后代选择器可能会污染里面的元素。
.g-xxx .m-yyy{}.g-xxx .u-yyy{}不要用布局去控制模块或元件，模块和元件应与布局分离独立。
.m-xxx .f-xxx{}.m-xxx .s-xxx{}不要通过模块或其他类来重定义或修改或添加已经定义好的功能类选择器和皮肤类选择器。
.m-xxx .class .class .class .class{}不要将选择器写的过于冗长，这会额外增加文件大小并且限制了太小范围的选择器，使树形结构过于严格应用范围过于局限，建议3-4个长度之内写完。
选择器并不需要完整反映结构嵌套顺序，相反，能简则简。
.m-xxx .m-yyy .zzz{}不要越级控制，如果.zzz是.m-yyy的后代选择器，那么不允许.m-yyy之外的选择器控制或修改.zzz。
此时可以使用.m-yyy的扩展来修改.zzz，比如.m-yyy-1 .zzz{}。
扩展类使用错误
扩展类必须和其基类同时使用于同一个节点。
错误：class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。 正确：class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。查看更多关于NECcss规范_html/css_WEB-ITnose的详细内容...