oocss(Object Oriented CSS)
-
什么是 OOCSS？
- 分离结构和皮肤
- 分离容器和内容
-
优点和缺点
核心内容：
一个思想：面向对象编程；
两个原则：
1.分离结构（structure ）和外观（skin ）。 您应该在基础对象中保留结构和位置，并在扩展类中保留视觉特征（如 background 或 border）。这样您就不必覆盖视觉属性。
2.分离容器（container ）和内容（content ）。 永远不要在 CSS 中模仿 HTML 的结构。换句话说，实际上就是要求所有样式尽可能脱离它的内容，不管一开始它是为谁而服务的。
什么是 OOCSS
<div class="box-border box-2">Learn CSS</div>
<div class="box-border box-1">Learn OOP</div>
/* 重复的代码 */
.box-border{
border: 1px solid #CCC;
border-radius: 10px;
}
.box-1 {
width: 200px;
height: 200px;
}
.box-2 {
width: 120px;
height: 120px;
}
如果我们想让两个 div 的样式达到理想的效果，没有 box-border 这个公共类名，本身 box-1 和 box-2 单独作用是达不到理想的样式效果，换句话说 box-border 是基类 box-1 和 box-2 就是子类。
这就是在 CSS 中硬抽象出来的 OOP 概念，叫 OOCSS。
分离结构和皮肤
皮肤是我们可见的视觉属性，例如：
- Colors 颜色
- Fonts 字体
- Shadows 阴影
- Gradients 渐变
- BackgroundColos 背景
结构当然就是我们不可见的视觉属性，例如：
- Height 高度
- Width 宽度
- Position 位置
- Margin
- Padding
- Overflow
Eg:
/* 结构 */
.card {
border: 1px solid #ddd;
padding: 16px;
margin: 16px;
}
/* 外观 */
.card--primary
{
background-color: #007bff;
color: white;
}
.card--secondary
{
background-color: #6c757d;
color: white;
}
分离容器和内容
- 不使用继承选择符（形如
.container li{...}的结构），以达到子元素即使离开了容器也应该能正确显示的效果。
- 尽量不给样式限定用途 以让样式具有可复用性。
Eg:
<ul class="list">
<li class="list-item">Item 1</li>
<li class="list-item">Item 2</li>
</ul>
.list {
padding: 0;
list-style: none;
}
.list-item {
padding: 8px;
border-bottom: 1px solid #ddd;
}
优点与缺点
优点：
扩展性： OOCSS 允许您在不同元素上自由混合和重新应用类，而无需过多考虑它们的上下文。一个项目的新手可以重用他们的前辈已经抽象出来的东西，而不是堆积在 CSS 上。
维护性： 添加或重新排列 HTML 标记不再需要您重新考虑整个 CSS 流程。这对于正在进行的大型项目尤其有用。
提高网站速度。 减少重复有助于应用程序运行得更快。CSS 文件习惯于随着网站的复杂性增加而呈指数级扩展，从而增加网页大小。
可读性： 当其他程序员看到您的 CSS 时，他们将能够快速理解其结构。
快速上手： 尤其是对了解面向对象编程的新手来说。
缺点：
- 不适合小项目： 小型项目不一定需要可扩展性、可读性和可维护性。
- 增加元素类的数量： 您可能需要将多个类添加到一个元素以说明所有样式元素。这可能会给不熟悉 OOCSS 的人带来一些困惑，并且会使您的标记变得混乱。
- 有一个学习曲线： 如果您正在使用 OOCSS 而您的同事不熟悉它，这将需要他们在继续之前学习如何使用它，这需要时间。
- 无语义化的类名： 根据两个核心的分离原则，我们代码中不可能会出现
.btn这样一个类名搞定样式的情况，我们只会拆分的很细，但同时我们又需要.btn这样的业务类名。所以我们需要一种机制来解决这个问题。
