CSS开发规范
摘要:
无论多少人开发一个项目,规范是最初始也是最基本的,一个好的规范不仅让代码看起来完美也能够解决冲突。下面是我在开发时使用的css规范
基本规范:
- 所有名称小写,符合w3c规范
- 类名和id,多个变量之间用中划线连接
- 所有变量只能使用名词
- 变量定义要符合语义化
基本原则:
- 以项目名或者一个全局名称为命名空间,例如你的项目名叫demo,则命名空间为demo,这样在多人合作开发时,高度统一如一人编写。
- 关注分离,将 HTML、CSS 解耦;模块化编码。
模块化编写实践:
- 语义化的模块名
通过模块名应该能一眼就看出模块的是干什么的。一般模块名代表着这个模块的功能,如看到shopping就知道这个模块是购物的 - 模块内部的类名继承自父级
如:1 <div class="demo-shopping"> 2 <h2 class="demo-shopping-title">title</h2> 3 <p class="demo-shopping-body">hello world!</p> 4 ?</div>
上面的代码中,模块的名为 shopping,模块最外层使用
{命名空间}-{模块名}
的方式命名 Class。模块子元素以在此基础上进行命名。如果不继承父级的类名,很容易造成命名冲突。 - 充分考虑结构的语义化
虽然在 Class 的命名上已经做到的了关注分离,编写样式不再依赖具体的元素名称,但仍应该考虑语义化,根据元素设计的目的来使用元素。是段落的,你就用<p>
;是标题的,就用<h1>~<h6>
;是引用的,就用<blockquote>
, 而不是简单粗暴的用<div>
、<span>
。语义化的目的,一方面是抽去 CSS 以后,页面还是一个结构良好、可读的页面;另一方面,这也是 SEO 的最基本要求。 - 避免不必要的 CSS 选择符嵌套
Class 已经模块化命名,从类名上已经可以清晰的分辨元素的从属,一般情况下也不会造成类名冲突,没有必要再进行选择器嵌套,保持 css 结构清晰,提高渲染效率。特殊情况可以嵌套(如提高权重、主题之间代码隔离),但应避免过多层级。
1 /* 推荐写法 */ 2 .demo-shopping { 3 4 } 5 .demo-shopping-body { 6 7 } 8 /* 不推荐写法 */ 9 .demo-shopping .demo-shopping-body {}
- 与 JS 交互时,在模块 HTML 结构的最外一层添加状态,而非给模块每个子元素单独添加元素
给最外层添加状态类以后,整个模块的样式都能控制,减少操作,提高性能,比如,我们可以这样写:
1 <div class="demo-shopping demo-shopping-active"> 2 <h3 class="demo-shopping-title"></h3> 3 <p class="demo-shopping-content"></p>< 4 /div>
1 <div class="demo-box"> 2 <h3 class="demo-shopping-title demo-shopping-title-active"></h3> 3 <p class="demo-shopping-content demo-shopping-content-active"></p> 4 </div>
命名注意事项:
- 语义化,望文见义
如demo-tab
、demo-nav
,不要使用red
、left
等表象的词命名。 - 模块状态:
{命名空间}-{模块名}-{状态描述}
常用状态有:hover, current, selected, disabled, focus, blur, checked, success, error 等 - 子模块:
{命名空间}-{模块名}-{子模块名}
常用模块名有:bd(body),cnt(content),hd(header),text(txt),img(images/pic),title,item,cell 等, 词义表达组件要实现的功能。 - 模块嵌套:
1 <ul class="demo-nav"> 2 <li class="demo-nav-item"> 3 <a href="#">nav</a> 4 <ul class="demo-subnav"> 5 <li class="demo-subnav-item"> 6 <a href="#">subNav</a> 7 <ul class="demo-list">
- 统一命名风格(使用相同名词命名不同组件的子元素):
如 demo-tab-head, demo-modal-head,便于理解。
总结:
在开发中养成一个好的习惯是非常重要的,每个开发人员都应该有自己的规范,希望通过此文对你以后的编码有所改变。如果你有更好的建议,可以补充。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。