Ориентация на базовые варианты с помощью CSS — быстрый совет

скажи, какие есть базовые варианты?

Думаю, я начну с объяснения того, что я считаю базовыми вариантами. При использовании имен классов в семантических целях первым делом нужно придумать имя для конкретного компонента и добавить его в качестве атрибута класса. Обычно это не заканчивается там все же. Нередко существуют (семантические / визуальные) варианты одного конкретного компонента, поэтому чтобы пометить эти варианты, необходимо добавить второй класс в базовый класс, например, так:

.focus {} .focus.news {} .focus.topArticle {} 

Выдержка css выше иллюстрирует установку, о которой я говорю. Класс focus используется для любой части контента на странице, которая рекламирует другой контент на вашем сайте (подробнее об этом в будущей статье), дополнительные классы описывают природу контента, который можно найти в компоненте .focus. Базовый вариант в этом примере — .focus.

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

эта проблема

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

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

соответствующие базовые компоненты

div[class="focus"] {}
div[class~="focus"] {} 

К счастью, селектор атрибутов может помочь нам здесь. Первая строка кода выше предназначена для всех элементов div с фокусом одного класса. Если вам нужна альтернатива .focus (как мы ее знаем в css), вы можете использовать вторую строку. Это тонкое, но важное различие, которое помогает нам определить базовые варианты. (Реквизит идет к Йохену Вандендриессе за то, что он привлек мое внимание).

Имейте в виду, что это не глупо, хотя. С поддержкой браузера все в порядке (вплоть до ie7 и с небольшим обманом javascript, достаточно легко скопировать CSS в вычисляемом классе для ie6), но дополнительные символы (такие как пробелы, табуляции, …) могут все еще испортить ваш таргетинг , Их должно быть легко обрезать в большинстве случаев, но я уверен, что есть некоторые экзотические случаи, где это может быть серьезной проблемой. Другая проблема заключается в добавлении (тривиальных) дополнительных классов через javascript по любой причине (думаю, modernizr), что снова испортит вашу цель CSS.

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

игнорирование конкретного варианта компонента

div.focus:not([class~="news"]) {} 

И пока мы на этом, вот еще один маленький совет. Рассмотрим ситуацию, когда у вас есть один базовый вариант и 4 других варианта компонентов с небольшими визуальными изменениями. Теперь представьте пятую добавляемую (скажем, .focus.news), которая выглядит совершенно иначе, чем все остальные. Селектор выше поможет вам стилизовать все существующие варианты, не добавляя ни одного существующего стиля к варианту .news.

вывод

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

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