码迷,mamicode.com
首页 > Web开发 > 详细

CSS开发规范

时间:2015-12-15 15:58:31      阅读:110      评论:0      收藏:0      [点我收藏+]

标签:

摘要:

  转载:http://www.cnblogs.com/xiyangbaixue/p/3962038.html

无论多少人开发一个项目,规范是最初始也是最基本的,一个好的规范不仅让代码看起来完美也能够解决冲突。下面是我在开发时使用的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,便于理解。

CSS开发规范

标签:

原文地址:http://www.cnblogs.com/zzhui/p/5048515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!