css - OOCSS - 抽象化 CSS 对象中的元素

Question

这些天我正在学习更多关于 OOCSS 的知识，但我并不完全了解如何编写代码以允许扩展 CSS 对象。

假设我有一个名为 icon-text 的 CSS 对象，它使图标与文本对齐。

HTML

<div class="icon-text">
    <img class="icon-text__icon"></img>
    <span class="icon-text__caption"></span>
</div>

CSS

.icon-text {
    display: inline-block;
}
.icon-text > .icon-text__icon {
    vertical-align: middle;
    margin-right: 5px;
}

效果很好。 jsFiddle

但是如果我想包装 img 会发生什么？和/或 span在 a或者想使用 div而不是 span标题？使用 block 或内联元素肯定会影响我编写 CSS 对象的方式。我如何抽象对象内部的元素，以便它可以处理不同类型的元素？

Answer 1

因为您使用 BEM 语法，所以您不需要子选择器:

.icon-text > .icon-text__icon

只需使用这个:

.icon-text__icon

But what happens if I want to wrap the img and/or span in a

BEM 语法解决了嵌套问题。

or want to use div instead of span for the caption? Using block or inline elements would definitely affect how I write CSS objects. How can I abstract elements inside an object so that it could work with different kinds of elements?

OOCSS 只是一种选择 CSS 类的方法。如果您打算为 .icon-text__caption 交替使用 div 和 span，那么您必须设置属性 display.