CSS开发规范

摘要:

  无论多少人开发一个项目,规范是最初始也是最基本的,一个好的规范不仅让代码看起来完美也能够解决冲突。下面是我在开发时使用的css规范

基本规范:

  1. 所有名称小写,符合w3c规范
  2. 类名和id,多个变量之间用中划线连接
  3. 所有变量只能使用名词
  4. 变量定义要符合语义化

基本原则:

  1. 以项目名或者一个全局名称为命名空间,例如你的项目名叫demo,则命名空间为demo,这样在多人合作开发时,高度统一如一人编写。
  2. 关注分离,将 HTML、CSS 解耦;模块化编码。

模块化编写实践:

  1. 语义化的模块名

    通过模块名应该能一眼就看出模块的是干什么的。一般模块名代表着这个模块的功能,如看到shopping就知道这个模块是购物的

  2. 模块内部的类名继承自父级

    如:
    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。模块子元素以在此基础上进行命名。如果不继承父级的类名,很容易造成命名冲突。

  3. 充分考虑结构的语义化

        虽然在 Class 的命名上已经做到的了关注分离,编写样式不再依赖具体的元素名称,但仍应该考虑语义化,根据元素设计的目的来使用元素。是段落的,你就用 <p>;是标题的,就用 <h1>~<h6>;是引用的,就用 <blockquote>, 而不是简单粗暴的用 <div><span>。语义化的目的,一方面是抽去 CSS 以后,页面还是一个结构良好、可读的页面;另一方面,这也是 SEO 的最基本要求。
  4. 避免不必要的 CSS 选择符嵌套

            Class 已经模块化命名,从类名上已经可以清晰的分辨元素的从属,一般情况下也不会造成类名冲突,没有必要再进行选择器嵌套,保持 css 结构清晰,提高渲染效率。特殊情况可以嵌套(如提高权重、主题之间代码隔离),但应避免过多层级。
    1 /* 推荐写法 */
    2 .demo-shopping {
    3     
    4 }
    5 .demo-shopping-body {
    6 
    7 }
    8 /* 不推荐写法 */
    9 .demo-shopping .demo-shopping-body {}

  5. 与 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>


命名注意事项:

  1. 语义化,望文见义
     demo-tab、demo-nav,不要使用 redleft 等表象的词命名。
  2. 模块状态: {命名空间}-{模块名}-{状态描述}
    常用状态有:hover, current, selected, disabled, focus, blur, checked, success, error 等
  3. 子模块: {命名空间}-{模块名}-{子模块名}
    常用模块名有:bd(body),cnt(content),hd(header),text(txt),img(images/pic),title,item,cell 等, 词义表达组件要实现的功能。
  4. 模块嵌套:
    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">
  5. 统一命名风格(使用相同名词命名不同组件的子元素):
    如 demo-tab-head, demo-modal-head,便于理解。

总结:

  在开发中养成一个好的习惯是非常重要的,每个开发人员都应该有自己的规范,希望通过此文对你以后的编码有所改变。如果你有更好的建议,可以补充。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。