最佳选择器写法(模块)
/* 这是某个模块 */
.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时使用) */
统一语义理解和命名
| 语义 |
命名 |
简写 |
| 文档 |
doc |
doc |
| 头部 |
head |
hd |
| 主体 |
body |
bd |
| 尾部 |
foot |
ft |
| 主栏 |
main |
mn |
| 主栏子容器 |
mainc |
mnc |
| 侧栏 |
side |
sd |
| 侧栏子容器 |
sidec |
sdc |
| 盒容器 |
wrap/box |
wrap/box |
| 语义 |
命名 |
简写 |
| 导航 |
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 |
| 语义 |
命名 |
简写 |
| 浮动清除 |
clearboth |
cb |
| 向左浮动 |
floatleft |
fl |
| 向右浮动 |
floatright |
fr |
| 内联块级 |
inlineblock |
ib |
| textaligncenter |
tac |
| 文本居右 |
textalignright |
tar |
| 文本居左 |
textalignleft |
tal |
| 垂直居中 |
verticalalignmiddle |
vam |
| 溢出隐藏 |
overflowhidden |
oh |
| 完全消失 |
displaynone |
dn |
| 字体大小 |
fontsize |
fs |
| 字体粗细 |
fontweight |
fw |
| 语义 |
命名 |
简写 |
| 字体颜色 |
fontcolor |
fc |
| 背景 |
background |
bg |
| 背景颜色 |
backgroundcolor |
bgc |
| 背景图片 |
backgroundimage |
bgi |
| 背景定位 |
backgroundposition |
bgp |
| 边框颜色 |
bordercolor |
bdc |
| 语义 |
命名 |
简写 |
| 选中 |
selected |
sel |
| 当前 |
current |
crt |
| 显示 |
show |
show |
| 隐藏 |
hide |
hide |
| 打开 |
open |
open |
| 关闭 |
close |
close |
| 出错 |
error |
err |
| 不可用 |
disabled |
dis |