CSS规范 - 最佳实践

转载 2015年07月06日 21:05:38
最佳选择器写法(模块)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 这是某个模块 */
.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

相关文章推荐

前端代码标准最佳实践:CSS

http://powertoolsteam.blog.51cto.com/2369428/958007 我们再来谈谈CSS代码的一些标准实践。 1,命名 和其他语言规范一样,cs...

CSS架构最佳实践:预测、重用、扩展、维护

对于想踏入前端开发的工程师来说,通晓CSS(Cascading Style Sheets)则是最基本的要求。而擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现。无需使...

css布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在htt...

ReactMix:基于HTML+JS+CSS写APP的最佳实践

React Native官方支持iOS和Android,但并没有覆盖Web,有些人试图做出补救,如兼容React Native API的ReactWeb,也有人用在React Native上再封装一层...
  • hj7jay
  • hj7jay
  • 2016年06月30日 10:19
  • 592

CSS3立体文字最佳实践

昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,立体字的纵深感、方向感、错落感如何...
  • whqet
  • whqet
  • 2014年05月06日 13:40
  • 11140

CSS 布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在htt...
  • Tizian
  • Tizian
  • 2012年09月25日 10:13
  • 767

CSS最佳实践:为今后的项目制作空白CSS模板文件 留以后查阅

CSS最佳实践:为今后的项目制作空白CSS模板文件 如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们,那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最...

CSS团队精神:CSS最佳实践团队开发

英文原文:Be a CSS Team Player: CSS Best Practices for Team-Based Development,编译:w3cplus – D姐 你有过多少次...
  • mmrsdym
  • mmrsdym
  • 2014年05月15日 09:25
  • 292
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS规范 - 最佳实践
举报原因:
原因补充:

(最多只允许输入30个字)