SMACSS: правильно ли использовать сетку внутри модуля?

Я использую SMACSS (Масштабируемая и модульная архитектура для CSS): http://smacss.com/

В частности, я использую платформу Yahoo Pure CSS (SMACSS) (только таблицу стилей Grids): http://purecss.io/grids/

Правильно ли разместить сетку внутри модуля?

Например, вот сетка внутри модуля 'foo'. Модуль foo должен показывать строку из трех элементов.

<div class="foo">

    <div class="pure-g">

        <div class="pure-u-1-3 foo-thumbnail">Eat</div>
        <div class="pure-u-1-3 foo-title">At</div>
        <div class="pure-u-1-3 foo-description">Joes!</div>

    </div>

</div>

ИЛИ, лучше ли использовать методологию SMACSS для удаления сетки из модуля и написания собственного CSS-кода для достижения макета (вместо того, чтобы полагаться на классы сетки). Например:

<div class="foo">

    <div class="foo-thumbnail">Eat</div>
    <div class="foo-title">At</div>
    <div class="foo-description">Joes!</div>

</div>
Источник

2 ответа

Решение

Я столкнулся с тем же вопросом при создании одного масштабного проекта. Так что ответ - нет.

Потому что оно нарушит самое важное правило - его независимость от модуля. Правильный способ заключается в использовании module-mediator, У меня была похожая задача - отделить сетку от модулей, чтобы я мог расположить модули в столбцах. Я создал модуль под названием m-list с элементами m-list-cell,

Так что в вашем случае я бы поступил так же - внутри модуля я бы использовал процентную геометрию вместо pxи некоторый посредник для установки геометрии в контейнер с модулем.

Вот пример:

Давайте строить макет. Пусть это будет простая 2-х колоночная страница.

<div class="l-container">
    <div class="l-grid l-grid_10">
        <!-- MAIN CONTENT -->
    </div>
    <div class="l-grid l-grid_2">
        <!-- SIDEBAR -->    
    </div>
</div>

Итак, следующий шаг - разместите список N-столбцов внутри основной области содержимого:

<div class="l-container">
    <div class="l-grid l-grid_10">
        <ul class="m-list m-list_4cols">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

Теперь о m-list: Это наша волшебная палочка - ее задача отделить области от столбцов:

.m-list{
    width: 100%;
}

.m-list:after{
    content: "";
    display: block;
    clear: both;
}

.m-list li {
    float: left;
    box-sizing: border-box;
}

/* Lets define 4 columns view. We can scale it in depends of our needs */

.m-list_4cols li {
    width: 25%;
}

/* 
   Also we can use @media rules to reach adaptive behavior 
   you can use additional class like **.m-list_Ncols_onsmall** to change columns number.
   You can also scale modificators set according to your needs.
*/

@media only screen and (max-width: 520px) {

    .m-list .m-list_1col_onsmall li {
        width: 100%;
    }

    .m-list .m-list_2cols_onsmall li {
        width: 50%;
    }

    .m-list .m-list_3cols_onsmall li {
        width: 33.33%;
    }

}

Вы можете оформить сетку фундаментных блоков. Отличный пример такого модуля-посредника

Источник

Сетка сама по себе является правилами компоновки - подобно l -ограниченным и l-inline, которые вы знаете из книги, поэтому смешивать их с самим модулем не так, как в Smacss, это должно быть больше так:

<div class="pure-g">
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
</div>

Тем не мение! Помещение класса pure-xxx в одну и ту же разметку на самом деле не делает ваш модуль менее независимым, если он не зависит от него, вы можете использовать foo-thumbnails внутри l-constrain-me - но это мое собственное мнение.

Источник
Другие вопросы по тегам