本文讲的是一个健壮且可扩展的 CSS 架构所需的8个简单规则,
介绍
主要目标
具体的规则
1. 总是类名优先
2. 组件代码放在一起
1
2
3
4
5
6
7
8
9
10
|
ui/
├── layout/
| ├── Header.js
// component code
| ├── Header.scss // component styles
| ├── Header.spec.js // component-specific unit tests
| └── Header.fixtures.json // any mock data the component tests might need
├── utils/
| ├── Button.md // usage documentation for the component
| ├── Button.js // ...and so on, you get the idea
| └── Button.scss
|
3. 使用一致的类命名空间
4. 维护命名空间和文件名之间的严格映射
1
|
<div
class=
"myapp-Header">...</div>
|
5. 避免组件外的样式泄露
1
2
3
4
5
6
7
8
9
10
11
12
|
.myapp-Header {
background: black;
color: white;
&-
link {
color: blue;
}
&-signup {
border:
1px solid gray;
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.myapp-Header {
background: black;
color: white;
}
.myapp-Header-link {
color: blue;
}
.myapp-Header-signup {
border:
1px solid gray;
}
|
1
2
3
4
5
6
7
8
9
10
|
.myapp-Header {
&-signup {
display: block;
}
&-isScrolledDown &-signup {
display: none;
}
}
|
1
2
3
4
5
6
7
|
.myapp-Header-signup {
display: block;
}
.myapp-Header-isScrolledDown
.myapp-Header-signup {
display: none;
}
|
1
2
3
4
5
6
7
8
9
10
|
.myapp-Header {
&-signup {
display: block;
@media (max-width:
500px) {
display: none;
}
}
}
|
1
2
3
4
5
6
7
8
9
|
.myapp-Header-signup {
display: block;
}
@
media (max-width:
500px) {
.myapp-Header-signup {
display: none;
}
}
|
JS 端的快速一览
1
2
3
4
5
6
7
8
|
//
Create a namespace-
bound
local copy
of React:
var { React } = require(
'./config/css-ns')(
'Header');
//
Create
some elements:
<
div className=
"signup">
<
div className=
"intro">...</
div>
<
div className=
"link">...</
div>
</
div>
|
1
2
3
4
|
<div
class=
"myapp-Header-signup">
<div class="myapp-Header-intro">...</div>
<div
class=
"myapp-Header-link">...<
/div>
</div>
|
6. 避免组件内的样式泄露
1
2
3
4
5
|
.myapp-Header {
a {
color: blue;
}
}
|
1
2
3
4
5
|
+-------------------------+
| Header |
| |
| [home] [blog] [kittens] | <-- 这些都是 <a> 元素
+-------------------------+
|
1
|
.myapp-Header
a {
color: blue; }
|
1
2
3
4
5
6
7
|
+-----------------------------------------+
| Header +-----------+ |
| | LoginForm
| |
| |
| |
| [home] [blog] [kittens] | [info]
| | <-- 这些是 <a> 元素
| +-----------+ |
+-----------------------------------------+
|
1
2
3
4
5
|
.myapp-Header {
> a {
color: blue;
}
}
|
1
2
3
4
5
|
.myapp-Header {
> nav > p > a {
color: blue;
}
}
|
出于好奇的题外话:预防泄露样式进入组件
1
2
3
4
5
|
.myapp-Header {
> a {
color: blue;
}
}
|
1
2
3
|
a {
font-family:
"Comic Sans";
}
|
7. 遵守组件边界
1
2
3
4
5
6
7
8
9
|
+---------------------------------+
| Header +------------+ |
| | LoginForm
| |
| |
| |
| | +--------+
| |
| +--------+ |
| Button |
| |
| | Button
| | +--------+
| |
| +--------+ +------------+ |
+---------------------------------+
|
1
2
3
|
.myapp-LoginForm {
float: right;
}
|
1
2
3
4
5
|
.myapp-Header {
> .myapp-LoginForm {
float: right;
}
}
|
1
2
3
4
5
6
7
|
.myapp-Header {
> .myapp-LoginForm {
color: blue;
padding:
20px;
}
}
// COUNTER-EXAMPLE; DON'T DO THIS
|
1
2
3
4
5
6
7
8
|
.myapp-Header {
> .myapp-LoginForm {
> a {
// relying
on implementation details
of LoginForm ;__;
color: blue;
}
}
}
// COUNTER-EXAMPLE; DON
'T DO THIS
|
8. 松散地整合外部样式
1
|
<button
class=
"myapp-Button btn">
|
1
|
<button
class=
"myapp-Button">
|
1
2
3
|
.myapp-Button {
// from Bootstrap
.btn;
}
|
1
2
3
|
.myapp-Button {
@extend .myapp-utils-button;
//
defined elsewhere
in your project
}
|
1
2
3
|
.myapp-Button {
@extend %myapp-utils-button;
//
defined elsewhere
in your project
}
|
1
2
3
|
.myapp-Button {
@
include myapp-generateCoolButton($padding:
15px, $withExplosions:
true);
}
|
在结束前
1
|
<button
class=
"myapp-Button myapp-utils-button">
|
结语
原文发布时间为:2016年11月17日
本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。