CSS против DRY

Question

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

В наши дни стандартная доктрина состоит в том, чтобы всегда создавать макеты HTML с использованием семантической разметки и стилей CSS, поэтому я что-то здесь упускаю? Пожалуйста, дайте мне знать ваши мысли.

Answer 1

Даже если вы используете конкретный стиль только один раз, все равно есть преимущества сохранить его в других стилях и не помещать его в линию. Во-первых, существует разделение проблем, что приводит к улучшению ремонтопригодности. Если вы знаете, что собираетесь внести изменения только в стиль, есть единственное место, где можно искать любые изменения. Еще одним преимуществом является самостоятельное документирование необходимости ввода имени класса. Присваивая этому стилю имя, даже если оно используется один раз, это делает семантический код ниже более декларативным - вы можете прочитать, что не только этот случайный p абзац, но и, скажем, параграф intro .

Это, конечно, при условии, что вы никогда не будете использовать этот конкретный стиль снова. Если вы могли бы , то есть еще больше оснований выделять его в именованный стиль. Встроенные стили не являются злом, но они в некотором роде наркотики ворот.

Answer 2

В идеале ваш CSS должен быть «объектно-ориентированным» (по крайней мере, таким, каким может быть ОО как CSS). Вам следует «наследовать» от классов, которые устанавливают общие свойства, и создавать новые классы, когда вы определяете свойства, которые можно использовать в других местах.

Взгляните на проект OOCSS , который пытается поддержать эти принципы (или заново представить их как есть).

К цитата Welbog :

... Мне кажется, что "OOCSS" - это просто CSS, который написан не случайно. Почти так же, как вы можете писать не объектно-ориентированные проекты на ОО-языках, вы можете легко испортить фундаментальные идеалы, на которых был создан CSS. OOCSS, похоже, говорит: «Давай больше не будем облажаться, ребята».

Answer 3

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

Стив

Answer 4

В некоторых ситуациях я обычно пренебрегаю созданием нового класса для простого изменения стиля на одном элементе. Обычно, когда вы делаете это, довольно ясно, что существует вероятность того, что вам понадобится применить этот конкретный стиль к чему-то другому позже в будущем. Наиболее распространенный случай для меня - это когда мне нужно что-то, чтобы иметь определенный отступ / отступ, чтобы он находился в нужном месте, но это не настолько важный элемент, чтобы иметь собственный идентификатор.

Возможно, это не очень популярное мнение, но в этих сценариях я не думаю, что встроенный стиль - это зло.

Answer 5

«Глупая последовательность - это хобгоблин маленьких умов»

Итак, в этом случае какая глупая последовательность? :) Почему DRY имеет приоритет над разделением разметки и стиля?

Можете ли вы быть уверены, что ваше правило CSS будет использоваться только один раз? Более того, как вы можете быть уверены, что его не нужно будет менять в будущем, и как вы можете быть уверены, что вы станете человеком, которому необходимо внести изменения? Вы уверены, что вам даже нужно добавить класс или идентификатор для таргетинга на этот уникальный элемент?

Наверное, у меня проблемы с просмотром, как добавить

<input type="submit" style="border: 1px solid red;"/>

в некоторой степени превосходит 12 или более символов

<input type="submit" class="b-red">

.b-red {border: 1px solid red;}

или к потенциально эквивалентному количеству символов

input {border:1px solid red;}

Конечно, существуют ситуации, когда каждое правило может и должно быть нарушено. Вопрос в том, что вы получаете от следования за DRY, которое перевешивает важность следования дихотомии разметки / стиля?

Answer 6

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

Вы также можете попробовать поместить определенный класс div / page и написать для него стили потомков вместо встроенных элементов.

Кроме того, если вы когда-нибудь решите добавить javascript, у вас там не будет хорошо помеченного класса, и вам нужно будет его изменить.

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

Скажем, используя <b style="color:red">bold</b> вместо body.products div b {color: red}.

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

Но это излишне <p style="font-weight:bold;font-size:1.2em; text-index:20px;">Indented Bold Paragraph</p>, так что это <p class="indent bold larger">text</p> instead you can do

or ``<p><b></b></p>.