Fork me on GitHub

MaintainableCSS 《可维护性 CSS》 --- 约定篇

约定

可维护的CSS具有以下约定:

.<module>[-<component>][-<state>] {}

根据所讨论的模块,方括号是可选的。这里有些例子:

/* 模块 Module container */
.searchResults {}

/* 组件 Component */
.searchResults-heading {}

/* 状态 State */
.searchResults-isLoading {}

注意:

组件和状态都由破折号定界。
名称形式上是用lowerCamelCase。
选择器以模块名称为前缀。

我必须给每个元素一个类名?

不需要,你可以这样写 .searchResults p。但请注意,如果您嵌套包含p的模块,那么它将继承样式并需要重写(overriding)。

为什么要加模块名称前缀?

好问题。这里有一些没有前缀的HTML:

<div class="basket">
<div class="heading">

CSS:

/* module */
.basket {}

/* heading component of basket module */
.basket .heading {}

有两个问题:

1. 当查看HTML时,很难区分模块和组件;
2. `.basket .heading` 组件将继承意想不到副作用的 `.heading` 模块中的样式。
posted @ 2017-07-03 12:29  Terry√  阅读(190)  评论(0编辑  收藏  举报