CSS规范 - 最佳实践
2015-07-06 21:05
946 查看
最佳选择器写法(模块)
统一语义理解和命名
布局(.g-)
模块(.m-)、元件(.u-)
功能(.f-)
皮肤(.s-)
状态(.z-)
语义 | 命名 | 简写 |
---|---|---|
文档 | 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 |
相关文章推荐
- CSS规范 - 典型错误
- css笔记17:盒子模型加强版的案例
- css filter详解
- HTML+CSS - 前端设计的小技巧(持续更新......)
- css笔记16:盒子模型的入门案例
- Chrome表单文本框自动填充黄色背景色样式
- css笔记15:盒子模型
- CSS透明度设置支持IE,Chrome,Firefox浏览器
- 聊聊css hack
- css笔记14:css文件之间可以相互引用
- css笔记13:display用法
- 使用CSS3制图
- css3学习总结9--CSS3过渡
- css学习笔记一
- css3学习总结8--CSS3 3D转换
- css3学习总结7--CSS3 2D转换
- css笔记12:块元素和行内元素
- css3学习总结6--CSS3字体
- css3学习总结5--CSS3文本效果
- css3学习总结4--CSS3背景