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 更新日期
============================== */
I got what you mean ,saved to bookmarks, very decent internet site.
I believe this is one of the most vital info for me. And i am glad reading your article. But want to observation on few basic issues, The site taste is wonderful, the articles is truly great : D. Excellent task, cheers
I was curious if you ever considered changing the layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?
Would you be all for exchanging links?
We’re a gaggle of volunteers and starting a brand new scheme in ourcommunity. Your website offered us with useful info towork on. You have performed an impressive taskand our whole community might be grateful to you.