发布于 由admin

CSS `OOCSS` (Object-Oriented CSS) 与 `SMACSS` (Scalable and Modular Architecture for CSS)

各位观众老爷，大家好！今天咱们来聊聊CSS界的两大门派：OOCSS（面向对象的CSS）和SMACSS（可伸缩的模块化CSS架构）。这俩哥们儿都是为了解决CSS代码可维护性、可复用性和可扩展性而生的，但路数稍微有点不一样。今天咱们就来扒一扒它们的底裤，看看它们到底有什么乾坤。

开场白：CSS的那些年，我们一起踩过的坑

想想当年，咱们写CSS的时候，是不是经常这样？

  • 全局污染： 一个样式改了，整个网站都遭殃。
  • 选择器地狱： .container .header .nav li a:hover，写的时候爽，改的时候哭。
  • 代码冗余： 同一个样式，复制粘贴N遍，稍微改一点点，就又是一坨新的代码。
  • 维护困难： 接手别人的项目，看到CSS就想跑路。

这些问题，归根结底就是因为CSS缺乏组织性和结构性。OOCSS和SMACSS，就是来拯救咱们于水火之中的。

第一回合：OOCSS（面向对象的CSS）——拆解与重组

OOCSS的核心思想是：把视觉元素分解成可重用的对象，然后通过组合这些对象来构建复杂的界面。它主要有两个原则：

  1. 结构与皮肤分离： 把元素的结构（如尺寸、间距）和外观（如颜色、字体）分开定义。
  2. 容器与内容分离： 避免样式依赖于特定的容器，让元素可以在不同的容器中重复使用。

举个栗子：

假设我们要创建一个按钮，按照传统的写法，可能是这样：

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #3e8e41;
}

这段代码看起来没啥毛病，但如果我们需要创建一个不同颜色的按钮，就得复制粘贴，然后改颜色。这不符合OOCSS的原则。

按照OOCSS的思路，我们可以把按钮拆解成几个部分：

  • 结构： button类，定义按钮的基本结构，如display、padding。
  • 皮肤： button--primary、button--secondary等类，定义按钮的颜色、背景等外观。

代码如下：

/* 结构 */
.button {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
}

/* 皮肤 */
.button--primary {
  background-color: #4CAF50;
  color: white;
}

.button--primary:hover {
  background-color: #3e8e41;
}

.button--secondary {
  background-color: #008CBA;
  color: white;
}

.button--secondary:hover {
  background-color: #0077B3;
}

HTML代码：

<a href="#" class="button button--primary">主要按钮</a>
<a href="#" class="button button--secondary">次要按钮</a>

这样，我们就可以通过组合不同的类来创建不同样式的按钮，而无需复制粘贴大量的代码。

OOCSS的优点：

  • 可重用性高： 相同的结构和皮肤可以应用到不同的元素上。
  • 可维护性好： 修改样式只需要修改对应的类，不会影响其他元素。
  • 代码简洁： 避免了大量的重复代码。

OOCSS的缺点：

  • 类名增多： 需要定义大量的类名，可能会让HTML代码看起来比较臃肿。
  • 学习曲线： 需要理解OOCSS的原则，才能写出高质量的代码。

第二回合：SMACSS（可伸缩的模块化CSS架构）——分类与组织

SMACSS的核心思想是：把CSS代码按照一定的规则进行分类和组织，从而提高代码的可维护性和可扩展性。它主要分为五个类别：

  1. 基础（Base）： 定义HTML元素的基本样式，如body、h1、p等。
  2. 布局（Layout）： 定义页面的整体结构，如header、footer、sidebar等。
  3. 模块（Module）： 定义可重用的UI组件，如button、form、navigation等。
  4. 状态（State）： 定义元素的不同状态，如active、disabled、hover等。
  5. 主题（Theme）： 定义网站的整体主题风格，如颜色、字体等。

举个栗子：

假设我们要创建一个导航栏，按照SMACSS的思路，我们可以这样组织代码：

/* 基础（Base） */
body {
  font-family: Arial, sans-serif;
  margin: 0;
}

/* 布局（Layout） */
.l-header {
  background-color: #f0f0f0;
  padding: 20px;
}

/* 模块（Module） */
.m-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.m-nav__item {
  display: inline-block;
  margin-right: 10px;
}

.m-nav__link {
  text-decoration: none;
  color: #333;
}

.m-nav__link:hover {
  color: #0077B3;
}

/* 状态（State） */
.is-active {
  font-weight: bold;
}

HTML代码：

<header class="l-header">
  <nav class="m-nav">
    <li class="m-nav__item">
      <a href="#" class="m-nav__link is-active">首页</a>
    </li>
    <li class="m-nav__item">
      <a href="#" class="m-nav__link">产品</a>
    </li>
    <li class="m-nav__item">
      <a href="#" class="m-nav__link">关于</a>
    </li>
  </nav>
</header>

在这个例子中，我们使用了SMACSS的命名规范：

  • l-：表示布局（Layout）
  • m-：表示模块（Module）
  • is-：表示状态（State）

这样，我们就可以清晰地知道每个类名的作用，方便维护和扩展。

SMACSS的优点：

  • 代码组织性好： 按照类别组织代码，方便查找和修改。
  • 可扩展性强： 可以根据需要添加新的模块和状态。
  • 易于理解： SMACSS的原则比较简单，容易上手。

SMACSS的缺点：

  • 命名规范： 需要遵循一定的命名规范，可能会增加一些学习成本。
  • 灵活性： 相比OOCSS，SMACSS的灵活性稍差。

第三回合：OOCSS vs SMACSS——谁才是最终赢家？

其实，OOCSS和SMACSS并不是相互对立的，它们可以结合使用。你可以把OOCSS的思想应用到SMACSS的模块中，从而提高模块的可重用性。

例如，我们可以把上面的导航栏模块，按照OOCSS的思路进行改造：

/* 模块（Module） */
.m-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 模块元素（Module Element） */
.m-nav__item {
  display: inline-block;
  margin-right: 10px;
}

/* 模块元素（Module Element） */
.m-nav__link {
  text-decoration: none;
  color: #333;
}

.m-nav__link:hover {
  color: #0077B3;
}

/* 状态（State） */
.is-active {
  font-weight: bold;
}

/* 皮肤（Skin） */
.m-nav--dark .m-nav__link {
  color: #fff;
}

.m-nav--dark .m-nav__link:hover {
  color: #ccc;
}

HTML代码：

<header class="l-header">
  <nav class="m-nav">
    <li class="m-nav__item">
      <a href="#" class="m-nav__link is-active">首页</a>
    </li>
    <li class="m-nav__item">
      <a href="#" class="m-nav__link">产品</a>
    </li>
    <li class="m-nav__item">
      <a href="#" class="m-nav__link">关于</a>
    </li>
  </nav>

  <nav class="m-nav m-nav--dark">
    <li class="m-nav__item">
      <a href="#" class="m-nav__link is-active">首页</a>
    </li>
    <li class="m-nav__item">
      <a href="#" class="m-nav__link">产品</a>
    </li>
    <li class="m-nav__item">
      <a href="#" class="m-nav__link">关于</a>
    </li>
  </nav>
</header>

在这个例子中，我们添加了一个m-nav--dark类，用于定义深色主题的导航栏。这样，我们就可以通过组合不同的类来创建不同样式的导航栏，而无需修改原有的代码。

总结：

特性 OOCSS SMACSS 结合使用
核心思想 拆解与重组 分类与组织 模块化 + 对象化
适用场景 需要大量重用UI组件的项目 需要清晰的代码组织结构的项目 两者兼顾，既需要重用UI组件，又需要清晰的代码组织结构的项目
优点 可重用性高、可维护性好、代码简洁 代码组织性好、可扩展性强、易于理解 兼具OOCSS和SMACSS的优点，代码可重用性高、可维护性好、代码简洁、代码组织性好、可扩展性强、易于理解
缺点 类名增多、学习曲线 命名规范、灵活性稍差 需要同时学习OOCSS和SMACSS的原则，并进行合理的组合，可能会增加一些学习成本。
命名规范 无特定规范，但通常使用双横线分隔符（如button--primary） 使用前缀表示类别（如l-header、m-nav、is-active） 可以结合使用，例如m-nav表示模块，m-nav__item表示模块元素，m-nav--dark表示模块的皮肤
结构组织 将元素拆解成结构和皮肤 按照基础、布局、模块、状态、主题进行分类 可以将OOCSS的思想应用到SMACSS的模块中，例如将模块拆解成结构和皮肤，或者使用SMACSS的命名规范来组织OOCSS的类名
代码示例 见上面的OOCSS代码示例 见上面的SMACSS代码示例 见上面的OOCSS + SMACSS代码示例

最终结论：

OOCSS和SMACSS都是优秀的CSS架构方法，它们可以帮助我们写出更加可维护、可复用和可扩展的CSS代码。选择哪种方法，取决于你的项目需求和个人喜好。如果你需要大量的重用UI组件，那么OOCSS可能更适合你；如果你需要清晰的代码组织结构，那么SMACSS可能更适合你。当然，你也可以把它们结合起来使用，从而达到更好的效果。

总而言之，没有最好的CSS架构，只有最适合你的CSS架构。希望今天的讲座能对你有所帮助！

下课！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注