Как я могу / я должен лучше объединить многочисленные объявления стиля?

Question

Лучше / быстрее (1) составлять стеки селекторов в объявлениях стилей, (2) складывать классы в тегах HTML или (3) складывать дублирующиеся объявления в уникальных селекторах?

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

1 (селекторы классов дублируются):

<style>
.one, .two, .three {color:white}
.one, .two {background:blue;height:30px}
.one, .three {width:800px}
.two, .three {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

2 (дублируются встроенные классы):

<style>
.white {color:white}
.bluebg {background:blue}
.heightThirty {height:30px}
.widthEight {width:800px}
.sizeSixteen {font-size:16pt}
.one {font-size:10pt}
.two {width:650px}
.three {background:#333}
</style>
<div class="one white bluebg heightThirty widthEight"></div>
<div class="two white bluebg heightThirty sizeSixteen"></div>
<div class="three white widthEight sizeSixteen"></div>

3 (объявления дублируются):

<style>
.one {color:white; background:blue; height:30px; width:800px; font-size:10pt}
.two {color:white; background:blue; height:30px; font-size:16pt; width:650px}
.three {color:white; width:800px; font-size:16pt; background:#333}
</style>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

Раньше я создавал сайты с использованием третьего метода, но мне было сложно изменять значения, если, например, я решил изменить цветовую схему сайта. Я должен был бы сделать поиск / замену для background:blue и изменить его на что-то другое (но поиск / замена может оказаться неэффективным, если я не последовательный). Сейчас я использую комбинацию первого и второго метода с предпочтением первого. Я решаю, какие элементы должны совместно использовать объявления стилей, и группирую их вместе в таблице стилей.

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

Есть ли метод, который следует использовать? Я указал на проблему, которая может возникнуть с третьим методом, но есть ли другие проблемы (с любыми тремя), о которых я не знаю?

Answer 1

Мне нравится 3-й метод и 1-й метод.

При работе на большинстве сайтов я стараюсь использовать 1-й сервис, не дублируя селекторы во многих местах (только в нескольких), чтобы они оставались под контролем.

При использовании 3-го метода рефакторинг может оказаться кошмаром, здесь появляется роль других языков, переводящих на CSS, а именно SASS и LESS. Эти языки позволяют хранить повторяющиеся части в переменных и функциях (обычно называемых «миксинами»).

Я думаю, вы будете любить МЕНЬШЕ http://lesscss.org/ много. Я перешел к существующему проекту, используя его для создания специальных многократно используемых виджетов пользовательского интерфейса, и весь CSS использовал LESS, и без предварительного знания было достаточно легко понять существующий код и написать новые части. Рекомендуется для новых веб-сайтов, в то время как он или 1-й метод подходят для существующих сайтов.

Answer 2

с моей точки зрения, этот лучше

<style>
.main div{background:blue;width:800px;font-size:16pt;color:white;}
.one, .two {height:30px}
</style>

<div class='main'>
<div class="one" style='font-size:10pt'></div>
<div class="two" style='width:650px'></div>
<div class="three" style='background:#333'></div>
</div>

Answer 3

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

Метод # 1

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

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

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

Метод # 2

Так что это приносит много разработчиковко второму варианту.Но поскольку эстетика сайта редко соотносится с семантикой, они заканчивают тем, что используют имена классов, такие как blue, red3 или primary-color, secondary-color, или width-1col и width-3col и т. Д. Но это в равной степени плоховариант, так как он полностью нарушает разделение контента и представления.Возможно, в вашем текущем дизайне окно поиска, меню категорий и опросы сообщества отображаются в правом столбце и имеют одинаковую ширину, но это не всегда так.Поэтому, если вы измените дизайн сайта, вам придется изменить ваш HTML в дополнение к вашему CSS.

Так в чем же решение?

Большинство разработчиков используют комбинацию 3. Они используют опцию1, когда эстетическая организация совпадает с организацией сайта / пользовательского интерфейса.Они используют вариант 2, когда эстетическая структура совпадает с семантической структурой.И они прибегают к варианту 3 при сбое 1 и 2.

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

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

Это дает разработчикам инструменты, необходимые для написания эффективных, управляемых CSS и HTML безизменение спецификации CSS.Вы просто пишете, используя SCSS или эквивалентные метаязыки, а затем позволяете Sass преобразовать его в CSS для вас.Некоторые люди даже связывают его с Haml , но я не нашел необходимости заходить так далеко.