Лучшие практики - CSS Theming

Ответ 1

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

Ссылка

Ответ 2

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

Это можно комбинировать с некоторыми другими предложениями. (Я настоятельно рекомендую авторизовать SASS с Compass!)

Ответ 3

В ситуациях, когда требуется тема, я лично использую три таблицы базового стиля:

• Таблица стилей reset (обычно Eric Meyer)
• Таблица стилей для позиционирования элементов (поля, paddings, floats и т.д.)
• Типография и цвета

В этом подходе очень много повторений, поэтому ответ @treefrog может быть лучшим подходом. Единственное экономическое благословение, которое я могу предложить для моего подхода, поэтому он хорошо работает для меня, заключается в том, что легко узнать, куда пойти, чтобы изменить шрифт заголовка от Arial до Times New Roman (или что-то еще), и где найти background-colors для страницы. Обычно они хранятся в Wordpress-подобном устройстве:

http://www.example.com/css/reset.css http://www.example.com/css/themeName/typography.css http://www.example.com/css/themeName/layout.css

Ответ 4

Хороший вопрос. +1

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

Для более сложных тем, где изображения импортируются как ключевые части макета или темы, лучше полностью вложить свои ресурсы под тему. Вы можете увидеть примеры этого, исследуя структуры каталогов пакетов Javascript, таких как Dojo, которые позволяют переключаться между несколькими темами. Если вы просмотрите структуры каталогов "Tundra" или "Soria" в библиотеке Dijit, вы увидите, какие "лучшие практики" они использовали для деления своих CSS файлов.

Ответ 5

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

<div class="b-my-block">
  <span>some more content</span>
</div> Код >

И стиль для этого блока:

.b-my-block{ width:100%; height:300px; }

.b-my-block span{ background:red; }

'b' здесь префикс для блока. У вас могут быть разные префиксы для вас. Вы можете использовать префикс 'g' для некоторых глобальных классов, которые могут применяться и изменять любые другие элементы.

Затем, если вы хотите каким-либо образом расширить этот блок или изменить его, вы можете создать модификацию этого блока с помощью класса "b-my-block_blue", например:

<div class="b-my-block b-my-block_blue">
  <span>some more content</span>
</div> Код >

и фрагмент css:

.b-my-block_blue span{ background:blue; }

Это очень грубый пример. И я не уверен, насколько я достаточно толковый. Но я пытаюсь использовать эту технику в своем текущем проекте, и до сих пор он чувствует себя неплохо. Существует article об этом на русском языке. Может быть, кто-то мог бы перевести его на английском, если у него есть интерес для людей здесь.