Лучше ли импортировать предварительно написанное правило для каждого стиля CSS или написать собственное правило (OOCSS)?

Question

Я немного читал о Теории Николь Салливан о Объектно-ориентированном CSS . Короче говоря, основная идея состоит в том, что вместо того, чтобы начинать с нуля каждый раз, когда мы создаем стиль веб-сайта, вероятно, лучше использовать некоторые уже написанные базовые строительные блоки в качестве классов, а затем расширять в соответствии с нашими потребностями. («Расширение» подразумевает добавление более специфических / переопределяющих классов в HTML из-за невозможности наследования классов CSS друг от друга ... надеюсь, в CSS4? :) Принцип OOCSS основан на том факте, что вам не нужно переписывайте класс Java Math каждый раз, когда вам нужно найти синус двойного числа. Код уже написан (кем-то), так почему бы не использовать его?

Хотя я думаю, что это отличное предложение в абстрактной форме, у меня возникают проблемы с его пониманием с соответствующей точки зрения. [Прочтите ниже мой конкретный вопрос, но я всегда ищу материалы для чтения, поэтому не стесняйтесь остановиться на минуту и ​​прокомментировать еще несколько ссылок на ресурсы OOCSS, например, преимущества и критика, и т. д.]

Вот моя таблица стилей:

.heading {...} /* for all heading styles */
  .alpha   {...} /* specific changes for h1 */
  .beta    {...} /* specific changes for h2 */
  .gamma   {...} /* specific changes for h3 */
  .delta   {...} /* specific changes for h4 */
  .epsilon {...} /* specific changes for h5 */
  .zeta    {...} /* specific changes for h6 */

Теперь первый селектор предназначен для любого заголовка с общими свойствами, такими как font-family, letter-spacing и т. Д. И затем каждый «подкласс» (на самом деле не подкласс) имеет определенные различия, такие как color, font-style, font-weight и т. Д. Тот факт, что эти "подклассы" записаны после .heading в таблице стилей, указывает на то, что если любое из них содержит одинаковые свойства с неравными значениями, то свойство в .heading будет переопределено этим в "подклассе". Чтобы получить заголовок 1, я бы написал:

<h1 class="heading alpha">Contact Me</h1>

Фактически, я мог бы стилизовать любой элемент, например span, с помощью class="heading alpha", но на самом деле это действительно h1 элемент.

[Конечно, я бы хотел сказать

.heading {...}
  .alpha {
      extends: .heading;
      ...
  }
==============================
<h1 class="alpha">Contact</h1>

но мы еще не достигли этого уровня.]

У меня вопрос: если бы heading alpha s были выровнены по левому краю, что бы я сделал, чтобы сделать этот экземпляр центрированным? Николь сказала бы, что я должен импортировать ее таблицу стилей и использовать ее правило .txtC {text-align:center;}, чтобы мой код стал:

<h1 class="heading alpha txtC">Contact Me</h1>

Но я думаю, что немного однозначно иметь соответствие «один к одному» с правилами и классами CSS. Если бы я использовал этот метод, то мне не нужно было бы писать какие-либо из моих собственных таблиц стилей, а вместо этого просто добавить несколько небольших классов («legos») в мой HTML-код, сделав его громоздким и нечитаемым. Представьте себе:

    <p class="ital size-medium sans-ser txtJ med-height dark-blue">This is a 
    size 12pt, italic, Arial, left-right justified, 1.2em line height, dark 
    blue paragraph.</p>

Не имеет ли смысла написать один класс specialParagraph (или paragraph-special или что-то еще) и затем назначить все эти правила в CSS? Нет необходимости в Legos? В моем случае, я не могу просто добавить .alpha {text-align: center;} в начало моей страницы контактов? Или, может быть, даже in-line?

Answer 1

Смысл способа OOCSS состоит не в том, чтобы в первую очередь заимствовать фрагменты CSS из других библиотек, а писать новые правила только тогда, когда вы делаете то, чего никто раньше не делал.Очевидно, что это было бы невозможно и, вероятно, не лучше, чем бросить свой собственный.

Цель OOCSS - максимально абстрагировать ваши стили.Чем более они конкретны, тем меньше их можно использовать повторно, и когда вы это делаете, вы в конечном итоге пишете гораздо больше CSS.

Чтобы сформулировать это в терминах программирования, вместо создания класса автомобиля, а затем класса грузовика, которыйОбменивайтесь всеми видами общих методов, вы создаете класс транспортного средства, а затем расширяете его от легковых и грузовых автомобилей.

Эквивалент этого в CSS - использовать классы в качестве миксинов.Например, если вы используете много элементов <ul> и обнаруживаете, что постоянно устанавливаете поля и отступы равными 0, а стиль списка - ни одного, вам, вероятно, следует написать класс .reset, который сделает это за вас ипримените класс к вашему <ul> вместо того, чтобы снова и снова писать одни и те же три правила для всех элементов навигации и списка.

Еще один момент заключается в том, что вам нужно думать о своих абстракциях с визуальной точки зрения, дляНапример, если вы обнаружите, что большинство разделов вашего сайта находятся в прямоугольниках с рамками вокруг них, вы можете создать базовый класс, например:

.bordered-box {
    border-style:solid;
    border-width:1px;
    margin-bottom:20px;
    padding:20px;
}

Затем вы создадите другие классы для смешивания в стилях, которыене определены в .bordered-box, такие как цвет, ширина и т. д.

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

Для вашей точки зрения о HTML, как это: class="ital size-medium sans-ser txtJ med-height dark-blue", важно неРазличие между созданием классов CSS, которые определяют визуальные объекты, и классов CSS, которые просто определяют свойства CSS.Последнее смешно.Если вы собираетесь это сделать, вы можете просто использовать встроенные стили.

Answer 2

«Объектно-ориентированный CSS» - это на самом деле просто шаблон проектирования, позволяющий максимально эффективно использовать CSS, и по сути тот же подход, который Джонатан Снукс называет SMACSS .

Назовите ли вы это OOCSS или SMACSS, ключом к подходу является то, что вы создаете общие элементы пользовательского интерфейса, такие как nav abstraction . Эти элементы пользовательского интерфейса могут быть расширены с помощью более специфических функций путем добавления дополнительных классов к элементу и / или элементу контейнера. Или, в качестве альтернативы, вы можете добавить свои собственные пользовательские правила CSS, используя ID элемента или семантические классы.

Cascade Framework - это новый CSS-фреймворк, основанный на этом подходе. Это дает вам оптимальную производительность, оптимальную гибкость и оптимальную модульность с минимальными затратами.

Answer 3

Я думаю, что использование что-то вроде .txtC или .dark-blue противоречит духу CSS, где вы должны иметь возможность изменять внешний вид вашего сайта, просто используя другую таблицу стилей.

Например, проблема, которая может возникнуть, скажем, вы решили, что все заголовки должны быть красными, а не голубыми. Вместо того, чтобы просто обновить ваш CSS до .header { color: red }, вы должны просмотреть каждую страницу вашего HTML и заменить класс dark-blue на red. Или вы можете изменить свой CSS на dark-blue { color: red; }, но тогда имя класса не имеет никакого смысла.

Если вы добавите класс для каждого мыслимого правила, вы просто окажетесь в темных веках встроенных стилей и align="center" на каждом элементе.

Если вы собираетесь использовать «объектно-ориентированный» CSS, его следует использовать более похожим образом, у вас есть класс .header, который влияет на все ваши заголовки, но затем, если вы хотите другой цвет шрифта для вашего Заголовок домашней страницы, вы бы добавили дополнительное .header.home { color: cyan; } правило CSS. Вы хотите, чтобы ваши идентификаторы CSS и имена классов описывали контент, на который он влияет, а не стили, которые он предоставляет.