NEC CSS命名规则
NEC CSS命名规则
- 重置
reset和默认base：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动 - 统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等统一设置处理的样式
- 布局
grid(.g-)：将页面分割为几个大块，通常有头部、主体、主栏、侧栏、尾部等 - 模块
module(.m-)：通常是一个语义化的可以重复使用的较大的整体，比如导航、登录、注册、各种列表、评论、搜索等 - 元件
unit(.u-)：通常是一个不可再分的较为小巧的个体，通常被重复用于各种模块中，比如按钮、输入框、loading、图标等 - 功能
function(.f-)：为方便一些常用样式的使用，我们将这些使用率较高的样式剥离出来，按需使用，通常这些选择器具有固定样式表现，比如清除浮动等，不可滥用 - 皮肤
skin(.s-)：如果你需要把皮肤型的样式抽离出来，通常为文字色、背景色（图）、边框色等，非换肤型网站通常只提取文字色，非换肤型网站不可滥用此类 - 状态
.z-：为状态类样式加入前缀，统一标识，方便识别，她只能组合使用或作为后代出现(.u-ipt.z-dis{}，.m-list li.z-sel{})
布局 grid (.g-)
语义 | 命名 | 简写 |
|---|---|---|
文档 | doc | doc |
头部 | head | hd |
主体 | body | bd |
尾部 | foot | ft |
主栏 | main | mn |
主栏子容器 | mainc | mnc |
侧栏 | side | sd |
侧栏子容器 | sidec | sdc |
盒容器 | wrap/box | wrap/box |
模块 module (.m-), unit (.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 |
功能 function (.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 |
皮肤 skin (.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 |