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作为标题，该怎么办呢？使用块或内联元素肯定会影响我编写CSS对象的方式。如何抽象对象中的元素，以便它可以与不同类型的元素一起工作？

Answer 1

因为使用的是BEM语法，所以不需要子选择器：

.icon-text > .icon-text__icon

只需使用以下命令：

.icon-text__icon

但是，如果我想在a中包装img和/或span，会发生什么呢

BEM语法解决了嵌套的问题。

或者想要使用div而不是span作为标题？使用块或内联元素肯定会影响我编写CSS对象的方式。如何抽象对象中的元素，以便它可以与不同类型的元素一起工作？

OOCSS只是一种选择CSS类的方式。如果您计划交替使用div和.icon-text__caption的span，则必须设置属性display。

Answer 2

顺便说一句，如果你使用的是SASS，那么你可以像下面这样写你的模块，这是我所有OOCSS模块的基础。

// *************************************
//
//   Overview of module and usage
//
// *************************************

// -------------------------------------
//   Variables
// -------------------------------------

$some-variable: 7em;
$some-color: #3B5998;
$some-color: #c0deed;


// -------------------------------------
//   Base
// -------------------------------------


.module {


    // -------------------------------------
    //   Elements
    // -------------------------------------


    // ----- Element description ----- // 

    &__element {}


    // -------------------------------------
    //   Variations
    // -------------------------------------


    // ----- Variation description ----- // 

    &--variation {}

}