Я думаю, вы правы в том смысле, что да, в вашем конкретном примере .. возможно, сделать это будет проще. Но опять же, если вы посмотрите на первое предложение в OOCSS page:
Как вы масштабируете 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 }
затем в Ye ar позже некоторые из ссылок по-прежнему белые ..другие в пределах кнопки 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 (я очень рад, что они окончательно оформляют это. Большое спасибо за сообщение btw).
последнее замечание: Чтобы быть чистым OOCSS, один не должен изменить цвет по умолчанию a т.е. a {color: #000;} является неправильно!, оно должно быть оставлено на его цвет по умолчанию (который синий) .. всякий раз, когда кто-то хочет изменить этот цвет .. то они должны указать его т.е.
<a class="redLink">..</a>
поэтому в данном случае это больше похоже по умолчанию a является родительский класс .. и все остальное подклассов его и перекрывает его поведение по умолчанию ..
обновления - ответ на комментарий:
авторитетный аргумент сайта:
Такие инициативы почти всегда основаны на сообществе, а затем принимаются авторитетными компаниями .. и даже когда они принимаются крупными компаниями, это обычно происходит снизу вверх через энтузиастов-разработчиков, которые выступают за такие изменения. Я для одного был таким когда я работал в Амазонке. И даже когда он принят .. это обычно в небольших масштабах, а не во всех подразделениях в org. это даже не было бы хорошей идеей для Гуглов и амазонок, а также в facebook и т. д., чтобы обеспечить соблюдение такого правила. b/c всегда будет разница во мнениях. Не говоря уже о том, что такое микроуправление ограничивало бы творчество инженера. в вики для команды может быть руководство (то есть у нас был один для магазина приложений Amazon Kindle Touch), но для обеспечения соблюдения этого правила у 10 000 инженеров, работающих в компании, было бы нецелесообразно и не желательно.
Итак, если вы видите значение в OOCSS и начинаете внедрять на своем сайте и отстаиваете его своим коллегам по веб-дизайнерам, а затем это становится тенденцией, вот когда она в конечном итоге станет лучшей в отрасли лучшей практикой, и именно тогда вы можете ожидать, чтобы увидеть его на Facebook и т.д.
пример:
посмотрите на это:
просто: http://jsfiddle.net/64sBg/
немного подробнее: http://jsfiddle.net/64sBg/2/
Не задумываясь, вы увидите, что гранулярность в описаниях css допускает тонкие изменения без избыточности в определении стиля. Поэтому обратите внимание на стрелку влево и стрелку вправо. Также .red и.синие стили могут быть впоследствии применены к таблицам и т. д.
также обратите внимание на то, что в моем 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;
}
Спасибо за ваш ответ. Я вижу вашу точку зрения о преимуществах принципа № 2. Однако несколько моментов: я не могу найти один авторитетный сайт, в котором этот принципиальный проект реализован в больших масштабах, а не в facebook, а не в google, даже не в списке. Теперь я не пытаюсь спорить с авторитетом здесь. Я просто хочу указать, что это не похоже на идею, которая испытала масштаб - так что мы, возможно, еще не знаем реальных эффектов этой техники. У вас есть хорошие примеры этой техники - как можно более чистая форма? –
Я обновил свой ответ :) – abbood
Спасибо за хорошо разработанный ответ.Я думаю, что это то, что я должен пропустить через голову пару раз, прежде чем я полностью пойму плюсы и минусы. Я не очень хорошо разбираюсь в стратегии CSS большего масштаба - хорошая пища для размышлений! Я оставлю вопрос открытым какое-то время, было бы неплохо, если бы кто-то дал больше (чем мой) образованный аргумент счетчика. –