CSS设计规范(2)Class命名,选择器,代码组织

Class命名

  • class 名称中只能出现小写字符和连字符(-),例如 .btn 和 .btn-danger
  • class 名称应当尽可能短,并且意义明确。但避免过度任意的简写,.btn 代表 button,但是 .b 不能表达任何意思,只能代表个B
  • 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。
  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀。
  • 使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。
  • 使用 .ui-* class 来做通用UI模块样式声明

选择器

  • 对于通用元素使用 class ,这样利于渲染性能的优化。
  • 对于经常出现的组件,避免使用属性选择器(例如,[class^=”…”])。浏览器的性能会受到这些因素的影响。
  • 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3 。
  • 不采用 class=”btn btn-disabled”,推荐使用 class=”btn disabled” 写法
  • 只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 — 前缀类似于命名空间)。

扩展阅读:

  • Scope CSS classes with prefixes
  • Stop the cascade

代码组织

  • 以组件为单位组织代码段。
  • 制定一致的注释规范。
  • 使用一致的空白符将代码分隔成块,这样利于扫描较大的文档。
  • 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动。

注释规范

/* ==============================
 * Copyright: Tencent ISUX - 所属部门
 * Project: Qzone Touch - 项目名
 * Description: 这里是该文件的介绍,模块/组件说明
 * Author: 创建/维护者
 * Datetime:2013.10.23 更新日期
   ============================== */




8 thoughts on “CSS设计规范(2)Class命名,选择器,代码组织”

  • I have checked your website and i’ve found some duplicate content, that’s why you don’t rank high in google’s search results,
    but there is a tool that can help you to create 100% unique
    articles, search for: SSundee advices unlimited content for your blog

  • I often visit your site and have noticed that you don’t update it often. More frequent updates will give your website higher rank &
    authority in google. I know that writing posts takes a lot of time, but you can always help yourself with miftolo’s tools
    which will shorten the time of creating an article to
    a couple of seconds.

  • I see you don’t monetize your blog, don’t waste your traffic,
    you can earn extra cash every month. You can use the best adsense alternative for any type of website (they approve all websites), for
    more info simply search in gooogle: boorfe’s
    tips monetize your website

  • I have been surfing online more than three hours today, yet I
    never found any interesting article like yours.
    It’s pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did,
    the internet will be a lot more useful than ever
    before. You’ve made some decent points there. I checked on the net to learn more about the issue
    and found most people will go along with your views on this web site.
    I visited several websites except the audio quality
    for audio songs current at this web site is actually wonderful.
    http://foxnews.net/

  • These are actually enormous ideas in on the topic of
    blogging. You have touched some fastidious points
    here. Any way keep up wrinting. I have been browsing online more than 4 hours today, yet I never found any interesting article like yours.

    It’s pretty worth enough for me. In my view, if all webmasters
    and bloggers made good content as you did, the web will be much more useful than ever before.
    Greetings from Los angeles! I’m bored to death at work
    so I decided to browse your website on my iphone during lunch break.
    I enjoy the info you provide here and can’t wait to take a look when I get home.
    I’m surprised at how fast your blog loaded on my cell phone
    .. I’m not even using WIFI, just 3G .. Anyhow, fantastic blog!
    http://foxnews.org/

发表评论

电子邮件地址不会被公开。