清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
最佳选择器写法(模块)
/* 这是某个模块 */
.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
|