css-几点原则

1.不要写不需要的样式定义

  • 减少CSS文件的长度,以便浏览。
  • 明确你的CSS类需要做什么,而不是定义一堆已经产生的垃圾。


2.将CSS看作可重用组件

定义可重用的CSS和组件以供自己使用,则可以减少很多复杂性,重用类的作用:

  • 确保你的设计风格在不同的页面之间保持一致
  • 提高编写CSS效率
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.hide {
display: none;
}

.text-center {
text-align: center;
}

.padding-0 {
padding: 0;
}

.padding-xxs {
padding: 5px;
}

.padding-xs {
padding: 10px;
}

.padding-sm {
padding: 20px;
}

.padding-md {
padding: 30px;
}

.padding-lg {
padding: 40px;
}

.padding-xl {
padding: 50px;
}

.padding-xxl {
padding: 60px;
}


3.除非绝对需要,否则避免嵌套

1
2
3
4
5
6
7
8
9
10
a {
color: blue;
&:hover {
color: black;
}
}

.link--red {
color: red;
}


4.利用BEM防止嵌套

防止过度嵌套的一个策略是名为BEM(Block Element Modifier)的命名策略

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种CSS Class 命名方法。

类似于:

1
2
3
4
5
6
7
8
9
10
11
.block{}	
.block__element{}
.block--modifier{}
.block__element--modifie{}

/**或者*/

.type-block{}
.type-block__elementr{}
.type-block_modifier{}
.type-block__element_modifier{}
  • block:封装一个独立的实体,它本身是有意义的。尽管块可以嵌套并相互交互,但在语义上它们保持平等; 没有优先级或层次结构 。
  • 块的一部分,没有独立的含义。任何元素都在语义上与其块相关联。
  • 在块或元素上的标志。使用它们来改变外观,行为或状态


1
2
3
<div class=”profile”>
<img src=”person.jpg” class=”profile__photo”/>
</div>
1
2
3
4
5
6
7
8
9
.profile {
background-color: white;
border: 1px solid #ccc;
}

.profile__photo {
border-radius: 50%;
border: 1px solid #000;
}


5.只使用 inportant 作为最后的手段