OOCSS Разделение контейнера и содержимого?

Question

Вопрос: действительно ли второй принцип OOCSS действительно?

Согласно второму принципу OOCSS, у вас не должно быть стилей, зависящих от местоположения:

Цитата с https://github.com/stubbornella/oocss/wiki

По сути, это означает "редко использовать стили, зависящие от местоположения". Объект должен выглядеть одинаково, независимо от того, где вы его положили. Таким образом, вместо стилизации определенного h2 с помощью.myObject h2 {...}, создайте и примените класс, который описывает рассматриваемый h2, например, h2 class="category".

Давайте возьмем практический пример этого. Скажем, у меня есть стандартная настройка 2.0 с нормальным телом (белый фон) и огромным нижним колонтитулом (черный фон). В теле у нас есть черные ссылки, а в нижнем колонтитуле, конечно, нам нужен белый. Это не самый простой и интуитивно понятный способ добиться этого просто:

a{ color: #000; }
.footer a{ color: #FFF; }

Если я буду следовать принципам OOCSS, мне придется сначала создать класс:

.inverted{ color: #FFF; }

Затем добавьте этот класс к каждой ссылке, которую я хочу перевернуть. Это похоже на стычку.

Не является ли целью всего языка то, что стили сделаны для Cascade? Я что-то здесь неправильно понимаю?

Answer 1

Я думаю, что вы правы в том смысле, что да, в вашем конкретном примере... возможно, сделать это по-своему будет проще. Но опять же, если вы посмотрите на первое предложение на странице OOCSS:

Как вы масштабируете CSS для тысяч страниц?

В этом контексте... второй принцип имеет смысл... поэтому, используя тот же пример (т.е. давайте предположим, что мы реализовали ваше решение)... скажем, что через год ваша компания решит создать светло-серые кнопки в черном нижнем колонтитуле, имея черный текст:

<!-- inside footer -->
<a class="button lightGrey">link</a>

в этом случае.. все a теги будут белыми, потому что они покрыты вашим каскадом. Итак, нам нужно будет создать еще один sytle, чтобы отменить то, что сделал ваше решение:

.footer a.button.lightGrey {
   color: #000;  /* huh? but i thought we did this before with a {color: #000;} ?*/
}

где, как будто мы просто приняли решение, что все a теги по умолчанию черные (см. последнее примечание):

a{ color: #000; }

затем в нижнем колонтитуле мы создадим специальный тип ссылки, которая должна быть белой:

.footerLinks { color: #FFF }

через год некоторые ссылки по-прежнему будут белыми... другие внутри кнопки greyLight будут черными:

<a class="button lightGrey">link</a>

тогда здесь нам не нужно беспокоиться о том, чтобы отменить что-либо.. a теги имеют цвет по умолчанию.. и все. если через 2 года кто-то решит, что ссылки внутри кнопок lightGrey (в любом месте на сайте, а не только в нижнем колонтитуле... в этом вся суть OOCSS) должны быть красными... тогда это будет подход OOCSS:

.redLink {
 color: red;
}

и HTML будет

<a class="button lightGrey redLink">link</a>

в этом случае не имеет значения, если мы уберем класс.lightGrey, или мы можем иметь этот код внутри или не в нижнем колонтитуле... это все то же самое... это приводит к более предсказуемому и повторно используемому коду... который это OOCSS (я очень рад, что они наконец формализовали это.. большое спасибо за пост кстати).

Последнее замечание: чтобы быть чистым OOCSS, нельзя менять цвет по умолчанию a т.е. a {color: #000;} это неправильно!, он должен быть оставлен на цвет по умолчанию (синий), когда кто-нибудь захочет изменить этот цвет, тогда он должен указать его, т.е.

<a class="redLink">..</a>

так что в этом случае это больше похоже на дефолт a является родительским классом.. и все остальное подклассы это и переопределяет его поведение по умолчанию..

обновление - ответ на комментарии:

уважаемый аргумент сайта:

такие инициативы почти всегда инициируются сообществом, а затем принимаются авторитетными компаниями... и даже когда они принимаются более крупными компаниями, это обычно происходит снизу вверх через энтузиастов разработчиков, которые выступают за такие изменения. Я, например, был таким сторонником, когда Я работал в Амазоне. И даже когда это принято.. Обычно это в небольших масштабах, а не по всем подразделениям в организации. Гуглам, амазонкам, фейсбукам и т. д. даже не было бы хорошей идеей обеспечить соблюдение такого правила, потому что всегда будет различие во мнениях... не говоря уже о том, что такое микроуправление ограничит творческий потенциал инженера... в вики может быть руководство для команды (т.е. у нас было руководство для магазина приложений Amazon Kindle Touch), но применять это правило для 10000 инженеров, работающих в компании, было бы не практично и не желательно.

Короче говоря, если вы видите ценность в OOCSS и начинаете внедрять его на своем сайте, предлагая его своим коллегам-веб-разработчикам, и тогда это становится трендом, именно тогда он в конечном итоге становится лучшей отраслевой практикой, и именно тогда вы можете ожидать увидеть это на фейсбуке и т. д.

пример:

Взгляни на это:
просто: http://jsfiddle.net/64sBg/
немного более подробно: http://jsfiddle.net/64sBg/2/

не вдаваясь в подробности (я уверен, что вы увидите шаблон), вы можете видеть, что гранулярность в описаниях css допускает незначительные изменения без какой-либо избыточности в определении стиля. Так что обратите внимание на стрелку влево и стрелку вправо... также стили.red и.blue могут впоследствии применяться к таблицам и т. Д.

также обратите внимание, что в моем css нет ни одного каскада.. поэтому мои стили могут применяться совершенно независимо (т. е. реализация правила . Объект должен выглядеть одинаково, независимо от того, где вы его поместили)

наконец... все еще есть возможность для каскадирования... вы, безусловно, можете использовать его в своих селекторах jQuery, например... также каскадирование происходит по умолчанию (т.е. без необходимости явно устанавливать его в стилях CSS).. так что если вы посмотрите на CSS ниже.. вы заметите, что свойства шрифта тела каскадно ко всем кнопкам.

<a class="button blue dark">
    <div class=" arrowDownWhite rightArrow">Analytics</div>
</a>

<a class="button red dark">
    <div class=" arrowDownWhite leftArrow">Actions</div>
</a>

<a class="button grey light">
    <div class=" arrowDownRed leftArrow">options</div>
</a>

и CSS:

body 
{
    font-family: Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
    font-size: 15pt;
}

.button 
{
    padding: .5em 1em;
    display: inline-block;
    text-decoration: none;
}
.dark {
    color: white;
}

.light{
    color: #E40E62;
}
.blue
{
    background-color: #51C8E8;
}
.red 
{
    background-color: #E40E62;
}
.grey 
{
    background-color: #E0E0E0 ;
}
.arrowDownWhite
{
    background-image:url(http://s2.postimage.org/ywam7ec4l/small_Arrow_Down_White.png); 
    background-repeat:no-repeat;

}

.arrowDownRed 
{
    background-image:url(http://s2.postimage.org/je5743t2d/small_Arrow_Down_Red.png);
    background-repeat:no-repeat;
}

.leftArrow 
{
    padding-left: 1em;
    background-position: left center;   
}

.rightArrow
{
    padding-right: 1em;
    background-position: right center;  
}

Answer 2

Это стоит хлопот отделить вашу кожу от контейнера.

Давайте смотреть за пределы цветов. Я бы хотел, чтобы Николь Салливан привела лучшие примеры, чем она. У меня есть 23 веб-сайта, которые содержат

• меню
• Вкладки
• Панели инструментов
• Горизонтальные и вертикальные списки ссылок

Все они скины абстракции Nav

Я начал с создания класса абстракции для обработки общего кода между ними. Я добавил несколько модификаторов, чтобы изменить ориентацию с горизонтальной на вертикальную, а также ее плавающую позицию. Я сохранил все цвета вне абстракции, а также правила CSS, которые могут меняться в зависимости от скина, к которому я применяю.

/* Object */

.nav
{
    margin-bottom: 1.5em; margin-left: 0; padding-left: 0; list-style: none;
}
    /* Modifier */

    .nav--stack .nav__item
    {
        display: block;
    }

    .nav--right
    {
        float: right;
    }

    /* Elements */

    .nav__item
    {
        float:left
    }

        .nav__item__link
        {
            display:none;
         }

Скин меню

Мне нужен был скин, который делал абстракцию.nav похожей на боковое меню. В случае, если вам интересно, я не поместил заполнение для.nav_item_link выше, потому что оно может меняться в зависимости от скина. Скин с вкладками имеет 2px.

/* Object */

.menu
{

}

/* Elements */

    .menu .nav__item--current.nav__item__link
    {
        color: #fff; background: blue;
    }

    .menu .nav__item__link
    {
        padding: 4px; border-radius: 4px;
    }

    .menu .nav__item__link:hover
    {
        background: #eee
    }

Обратите внимание, что вещи не зависят от местоположения - у меня 0 имен тегов. Я не разрабатываю li и детей на.nav, как это делает bootstrap. Этот код может использоваться на dls или даже div и имеет лучшую производительность в зависимости от того, как механизмы выбора читают правила.

Для меня польза от того, что мне нужно очистить объекты, которые у меня есть, для всех 23 сайтов, которые у меня есть, стоит хлопот.