CSS规范BEM CSS和OOCSS的示例代码详解

引言

在日常前端工作中，CSS规范的重要性不言自明。 CSS标准的定义和规范比较宽泛，因此前端工程师们经常会遇到样式混乱、代码重复、可维护性差，难以改造等问题。为了解决这些问题，我们需要编写遵循统一规范的CSS代码，其中BEM CSS和OOCSS是目前流行的两种规范方式。本篇文章主要讲解BEM CSS和OOCSS规范，并提供相应的示例代码。

主体

BEM CSS

BEM CSS全称为块、元素、修饰符CSS，是一种常用的命名规范，其核心思想是把CSS代码分解成更小、更可复用的组件，进而编写出易于扩展和维护的网页样式。

BEM的基本原则

• 块块 (Block)：定义一个独立的并拥有独立样式的模块，通常使用名词来描述它。比如：

  。

• 元素 (Element)：块组成的部分或者一个局部的部分被称为元素，通常使用块的名称为前缀，中间用两个下划线'__'连接，后跟描述元素的名字，例如：

  。

• 修改符 (Modifier)：定义块或元素的一个属性，其为可选元素，通常使用破折号‘--’连接，例如：

  或者

  。

具体的BEM代码示例:

<!-- .block -->
<div class="header">
    <!-- .header__logo -->
    <img class="header__logo" />
    <!-- .header__nav -->
    <nav class="header__nav">
        <!-- .header__nav-item -->
        <a class="header__nav-item" href="#">home</a>
        <!-- .header__nav-item -->
        <a class="header__nav-item header__nav-item--active" href="#">about</a>
    </nav>
</div>

上述代码中，header是块，logo和nav是header的元素，nav-item是nav的元素，nav-item--active是nav-item的修改符。

BEM的优点

• 提高代码的重用率和可扩展性：通过分解CSS代码，更小的模块可以更容易地重用和转换，更有良好扩展性；
• 更少的命名冲突：通过使用BEM规范分离块，元素和修改符，大大减少了类名的命名冲突问题；
• 更加易于维护和升级：样式表的代码结构清晰，单一列表可读，查询和维护更加容易。

OOCSS

OOCSS全称为面向对象CSS，是一种“面向对象”的CSS编程范式，其引入了类似于面向对象的代码设计概念，通过分离结构和外形，强调CSS代码的可复用性，并且遵循“DRY”原则 (Don't Repeat Yourself)。

OOCSS的基本原则

• 对象组件 (Object Component) ：是指需要重复使用的共同代码，可以通过类来组合实现。
• 布局设置 (Layout Setting) ：是指需要在不同的设备或场景中设定的代码组件，其主要划分应该是布局和容器。
• 皮肤 (Skin) ：即变化，因为需要经常改变。例如，按钮的皮肤是蓝色和绿色。

具体的OOCSS代码示例:

<header class="header">
    <h1 class="header-title">Title</h1>
    <nav class="nav">
        <ul class="nav-list">
            <li class="nav-item nav-item-selected nav-item-home">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item nav-item-selected nav-item-about">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item nav-item-selected nav-item-contact">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </nav>
</header>

上述代码中，header是一个对象组件，nav-list和nav-item是对象组件中的小部件。 nav-list和nav-item也是布局设置的一部分，被嵌入到header中。

OOCSS的优点

• 提高代码的重用性: 分离结构和样式，更好的定义样式，同时减少重复；
• 更少的样式冲突：通过 模块 (Module) 和 状态 (State) 这两种类别的基础CSS组件的继承，减少了多种样式的冲突；
• 更加易于维护和升级：利用模块和状态的继承和重用，代码更加干净和简化，便于维护。

结论

BEM CSS和OOCSS是两种优秀并且广泛应用的CSS规范方式，它们的核心思想都是分解CSS代码和提高代码重用率，进而提高代码的可扩展性、可维护性和可重构性。通过遵循BEM CSS和OOCSS规范，我们可以更好地处理CSS代码中的问题，并快速高效地进行网站开发。