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

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

BEM语法解决了嵌套问题。

或者想要使用div代替span作为标题？使用块或内联元素肯定会影响我编写CSS对象的方式。如何在对象内部抽象元素以便它可以使用不同类型的元素？

OOCSS只是一种选择CSS类的方法。如果您打算在div上交替使用span和.icon-text__caption，则必须设置属性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 {}

}

OOCSS - 抽象CSS对象内的元素

2 个答案: