OOCSS(Object-Oriented CSS),也就是面向对象的 CSS,这里的面向对象不同于 Java、Python 等语言的面向对象,但是根据 OOCSS 原则编写的 CSS 代码体现了面向对象的优点:易维护、高质量、高效率、易扩展、可重用等。

结合 Bootstrap,组件按照盒模型设计(header,body,footer),命名规则为:组件名 - 组件部件,组件的 CSS 代码,避免子元素查找,直接作用于独立 class,这样的组件更具扩展性和可重用性,也易于代码维护,如 Bootstrap 中的 Modal:

<style>
    .modal {
        /* css 代码 */
    }
    .modal-header {
        /* css 代码 */
    }
    .modal-title {
        /* css 代码 */
    }
    .modal-body {
        /* css 代码 */
    }
    .modal-footer {
        /* css 代码 */
    }
</style>

<div class="modal">
    <div class="modal-header">
        <h4 class="modal-title"></h4>
    </div>
    <div class="modal-body">
    </div>
    <div class="modal-footer">
    </div>
</div>