浙江爱信诺前端规范

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 .s-crt a {}/* 交互状态变化 */ 
						.m-nav .s-crt a.a1 {} 
						.m-nav .s-crt a.a2 {} 
						.m-nav .btn {}/* 典型后代选择器 */ 
						.m-nav .btn-1 {}/* 典型后代选择器扩展 */ 
						.m-nav .btn-dis {}/* 典型后代选择器扩展(状态) */ 
						.m-nav .btn.s-dis {}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */ 
						.m-nav .m-sch {}/* 控制内部其他模块位置 */ 
						.m-nav .u-sel {}/* 控制内部其他元件位置 */ 
						.m-nav-1 {}/* 模块扩展 */ 
						.m-nav-1 li {} 
						.m-nav-dis {}/* 模块扩展(状态) */ 
						.m-nav.s-dis {}/* 作用同上,请二选一(如果可以不兼容IE6时使用) */ 
						
统一语义理解和命名
布局(.g-)
语义命名简写
盒容器body/wrapbody/wrap
头部headerhd
内容contentct
主栏mainmn
侧栏sidecolsdc
尾部footerft
模块(.m-)、元件(.u-)
语义命名简写
导航navnav
子导航subnavsnav
面包屑crumbcrm
菜单menumenu
选项卡tabtab
标题区head/titlehd/tt
内容区body/contentbd/ct
列表listlst
表格tabletb
表单formfm
热点hothot
排行toptop
登录loginlog
标志logologo
广告advertisead
搜索searchsch
幻灯slidesld
提示tipstips
帮助helphelp
新闻newsnews
下载downloaddld
注册registreg
投票votevote
版权copyrightcprt
结果resultrst
标题titlett
按钮buttonbtn
输入inputipt
功能(.f-)
语义命名简写
浮动清除clearbothcb
向左浮动floatleftfl
向右浮动floatrightfr
内联块级inlineblockib
文本居中textaligncentertac
文本居右textalignrighttar
文本居左textalignlefttal
垂直居中verticalalignmiddlevam
溢出隐藏overflowhiddenoh
完全消失displaynonedn
字体大小fontsizefs
字体粗细fontweightfw
边距(.e-)
语义命名简写
上外边距10pxmt10mt10
右外边距10pxmr10mr10
下外边距10pxmb10mb10
左外边距10pxml10ml10
上内边距10pxpt10pt10
右内边距10pxpr10pr10
下内边距10pxpb10pb10
左内边距10pxpl10pl10
皮肤(.t-)
语义命名简写
字体颜色fontcolorfc
背景backgroundbg
背景颜色backgroundcolorbgc
背景图片backgroundimagebgi
背景定位backgroundpositionbgp
边框颜色bordercolorbdc
状态(.s-)
语义命名简写
选中selectedsel
当前currentcrt
显示showshow
隐藏hidehide
打开openopen
关闭closeclose
出错errorerr
不可用disableddis