问题描述:

I am learning more about OOCSS these days and I don't fully get how I can code to allow extending CSS objects.

Let's say I have this CSS object called icon-text which aligns icon with text.

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;

}

It works well. jsFiddle

But what happens if I want to wrap the img and/or spanin a 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?

网友答案:

Because you use a BEM syntax, you don't need the child selector:

.icon-text > .icon-text__icon

Just use this:

.icon-text__icon

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

The BEM syntax solves the issues of nesting.

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 is just a way to choose CSS classes. If you plan to use alternately a div and a span for .icon-text__caption, then you have to set the property display.

网友答案:

As a side-note, if you're using SASS then you can write your modules like below, which is the base i use for all of my OOCSS modules.

// *************************************
//
//   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 {}

}
相关阅读:
Top