用更合理的方式写 CSS

2024年1月4日 109次阅读 来源: 灬断弦Abc

OOCSS 和 BEM

出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：

  • 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。

  • 可以帮助我们创建出可重用、易装配的组件。

  • 可以减少嵌套，降低特定性。

  • 可以帮助我们创建出可扩展的样式表。

OOCSS，也就是 “Object Oriented CSS（面向对象的CSS）”，是一种写 CSS 的方法，其思想就是鼓励你把样式表看作“对象”的集合：创建可重用性、可重复性的代码段让你可以在整个网站中多次使用。

参考资料：

BEM，也就是 “Block-Element-Modifier”，是一种用于 HTML 和 CSS 类名的_命名约定_。BEM 最初是由 Yandex 提出的，要知道他们拥有巨大的代码库和可伸缩性，BEM 就是为此而生的，并且可以作为一套遵循 OOCSS 的参考指导规范。

示例

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <div class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </div>

</article>
.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

  • .listing-card 是一个块（block），表示高层次的组件。

  • .listing-card__title 是一个元素（element），它属于 .listing-card 的一部分，因此块是由元素组成的。

  • .listing-card--featured 是一个修饰符（modifier），表示这个块与 .listing-card 有着不同的状态或者变化。

    原文作者：灬断弦Abc
    原文地址: https://segmentfault.com/a/1190000008145675
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞