Архитектуры CSS: завершение рефакторинга MetaCoax

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

Процесс рефакторинга MetaCoax CSS позволяет вносить изменения в CSS с течением времени и волнами, так как код становится все чище и проще в управлении. Эта последняя статья в серии CSS Architectures описывает последние два этапа четырехэтапного процесса, а также историю успеха, которая возникла в результате его использования.

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

Этап 3: гладкие селекторы, групповые и отдельные

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

Вот что мы собираемся сделать:

Модульный больше
- Используйте имена состояний и имена JavaScript для связанных классов
- Переместить все стили на модульный уровень
Гладкие селекторы
- Полностью исключить элементы как селекторы
- Полностью исключить идентификаторы как селекторы
Групповые и раздельные
- СУХОЙ («не повторяйся»)
- Категорически отделить CSS
- Составьте план для @media

Модульная Подробнее

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

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

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

Государственные классы

Мне нравится SMACSS — использовать имена состояний, когда у меня есть классы состояний для элементов. Классы состояний создаются отдельно и обычно являются одним селектором классов. Например, модуль может быть расширен состояниями, такими как показано здесь:

.is-collapsed
.is-active
.is-error
.is-hidden

В SMACSS классы состояний являются единственным местом, где можно (и иногда следует) использовать! Важный.

Если правило состояния сделано для определенного модуля, рекомендуется включать имя модуля также в имя класса. Например:

 .is-navitem-hidden

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

 .navbar-is-hidden
.is-hidden-navbar

Специфичные для JavaScript классы

Николас Галлахер (Nicholas Gallagher), экстраординарный разработчик фронт-эндов, имеет практику создания классов, специально связанных с JavaScript. Он рекомендует использовать определенные классы только для хуков JavaScript и не прикреплять к ним какие-либо презентации . Такой класс JavaScript будет назван так:

 .js-login

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

Гладкие селекторы

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

Полностью исключить теги как селекторы

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

Полностью исключить идентификаторы как селекторы

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

Группировать и Отдельно

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

DRY It Up

Сила DRY CSS заключается в силе идеи «не повторяйся». Хотя я не нашел способа включить многие методы DRY CSS в процесс MetaCoax, мне нравятся некоторые аспекты умной группировки. селекторы, чтобы получить тот же стиль.

Например, если что-то вроде font-weight: bold неоднократно повторялось в таблице стилей, я могу увидеть ситуацию, когда многие селекторы элементов сгруппированы с {font-weight: bold:} в качестве основного стиля. Тем не менее, я бы применил эту практику как последнюю из серии техник, когда селекторы стилей были полностью оптимизированы.

Категорически отделить ваш CSS

На втором этапе мы создали категории SMACSS (или эквивалентные) в таблице стилей. Пришло время сделать еще один шаг и разделить эти разделы на отдельные файлы CSS: base.css, layout.css, module.css, state.css и theme.css.

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

Составьте план для @media

При планировании адаптивного дизайна SMACSS предлагает еще одну хорошую рекомендацию о том, как управлять запросами @media. Вместо группировки их в конце таблицы стилей, как это обычно делается, Snook предлагает добавить медиазапросы к макету и стилям модулей, на которые они влияют, поместив медиазапросы вокруг состояний модуля (или макета) .

Да, объявление медиа-запроса, скорее всего, будет объявлено несколько раз, но вся информация о модуле хранится вместе, что позволяет самостоятельно тестировать модуль. И, если вы следовали предыдущим рекомендациям, стили модулей в любом случае будут находиться в отдельном файле (module.css), поэтому вам не придется искать огромный CSS-файл, чтобы найти их.

Этап 4: обмен заботой

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

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

Хотя это «финальная» фаза проекта, на самом деле это не последний этап. Начните рано в проекте. Библиотека шаблонов и сопровождающее руководство по стилю не должны быть добавлены в конец проекта как запоздалая мысль — они являются важными компонентами процесса рефакторинга кода CSS.

Вот что мы собираемся сделать:

Создать библиотеку шаблонов
Создать руководство по стилю веб-сайта

Библиотеки образцов

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

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

Как часть процесса рефакторинга, вы все равно будете выполнять шаги с 1 по 3. Сложная часть создания библиотеки шаблонов — выяснить, как ее структурировать. В Интернете есть отличные примеры для вдохновения и подражания. Библиотека шаблонов пользовательского интерфейса MailChimp — отличный пример библиотеки шаблонов на одну страницу. PatternPrimer является отличным примером создания фрагментов кода независимо от контекста макета страницы ( также можно найти на GitHub ) и специально предназначен для мобильного адаптивного дизайна. Инструмент Pattern Pears — это миниатюрная CMS-библиотека шаблонов, созданная на WordPress для ввода и управления общими шаблонами разметки и стилей в хранилище всех стилей, независимо от контекста.

Руководства по стилю веб-сайтов

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

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

Это не может быть подчеркнуто достаточно: надежный способ убедиться, что создание руководства по стилю не является еще одной обременительной задачей, — это создать его, пока вы модернизируете стили на сайте. Следуя примеру создания библиотеки шаблонов, в статье « Руководства по стилю интерфейса» Анна Дебенхэм предлагает следующие заключительные шаги по созданию руководства по стилю для своего сайта:

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

Совет для профессионалов: сделайте руководство по стилю как можно более коротким и приятным, как это руководство по активам бренда MailChimp Не нужно писать том — чем длиннее руководство по стилю, тем меньше вероятность того, что кто-нибудь прочтет его, тем меньше будет его использовать и затем следовать указаниям.

Руководство по стилю Starbucks.com ( http://www.starbucks.com/static/reference/styleguide/ ) представляет собой простое, чрезвычайно хорошо организованное и документированное руководство по стилю, а также дает отличное руководство по структурированию живого онлайн-стиля. руководство. Руководство по стилю Kalei генерирует Twitter-Bootstrap- подобную документацию для CSS вашего сайта, поэтому на нее стоит обратить внимание. Анна Дебенхем собрала фантастическую коллекцию из еще большего количества примеров гидов по стилю .

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

MetaCoax Success

Теории, которые развиваются вокруг процессов, являются отличными интеллектуальными упражнениями, но лучшие идеи — это те, которые можно использовать. Я разработал процесс MetaCoax, объединив лучшие практики нескольких систем, и протестировал этот процесс на веб-сайте, содержащем 7500 строк безумно раздутого CSS-кода. Как прошел процесс MetaCoax?

Уменьшено общее количество строк CSS с 7500 до 2250
Исключены большинство встроенных стилей и несемантических элементов
Внедрить текущие новые лучшие практики
Установил сетку, исключив 327 экземпляров ширины и 738 экземпляров полей
Также устранено следующее:
- 1259 экземпляров div # и 836 экземпляров div
- 936 стилей, которые содержали body #
- 126 экземпляров! Важных
- 189 экземпляров margin-top и 112 экземпляров margin-bottom
Сделал код сайта более удобным для будущего

И … все это было достигнуто без видимых визуальных изменений на сайте!

Масштабируемый и модульный CSS FTW!

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

Ссылки для дальнейшего чтения

CSS Lint Pages
Ломка хороших привычек — выступление Гарри Робертса на конференции Front Trends 2012
Big CSS — еще одна замечательная презентация Гарри Робертса

Эта статья является частью технической серии HTML5 от команды Internet Explorer. Испытайте концепции этой статьи с 3 месяцами бесплатного кросс-браузерного тестирования BrowserStack @ http://modern.IE .