Проведение аудита CSS: Таблицы стилей не должны быть ужасными

Автор оригинала: Alex McPherson
  • Перевод
Когда мы начинаем работу над существующей базой кода, в первую очередь нужно провести аудит CSS. Основной вред от плохо организованных и запущенных CSS-таблиц заключается в замедлении процесса разработки, так как команде разработчиков приходится пробираться через дебри кода, и в нерабочем сайте, в случае если неверно определенные селекторы становятся причиной коллизий и наложения стилей.

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

Системы CSS

На что обратить внимание

Имеет ли ваш проект файл CSSReadme или другой подобный документ, который описывает принципы написания CSS для данного проекта? Наиболее успешные проекты начинают с более жестких систем, таких как SMACSS, BEM, или OOCSS и изменяют их с учетом последующих предложений и структуры. Если этого нет в вики-репозитории Github, основном README-файле проекта или в инструкции для нового разработчика в команде – считайте, что его не существует.

В конце концов, система CSS должна содержать указания на следующее:
• Как называть вновь создаваемые файлы и когда их создавать
• Как выбирать имена для свойств class и id
• Какие свойства CSS3 поддерживаются на сайте
• Какие варианты синтаксиса предпочтительны в рамках проекта (возможно ли использование однострочных скриптов?)

Как это поможет

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

Первые шаги в наведении порядка

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

Справочник стилей

На что обратить внимание

У ответственной команды разработчиков CSS должна иметься «кухонная мойка» для компонентов и стилей, составляющих веб-сайт, за который они отвечают. Когда новому разработчику дают задание по оформлению страницы, не всегда удобно пробираться сквозь страницы CSS или даже знать, где найти тот или иной элемент в продукте. Справочник стилей – это страница, предназначенная только для разработчиков, которая показывает, какие стили и компоненты уже созданы для сайта, так что к нему могут быть прикреплены условные обозначения, что экономит время и снижает количество дублирующих стилей.

Как это поможет

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

Первые шаги в наведении порядка

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

Pipeline

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

Как это поможет

Писать сырые CSS – это не солидно. Программы предварительной обработки вроде Sass и Less убирают большинство острых углов из процесса написания CSS и развивают хорошие привычки, связанные с функциями и переменными.
Перед отправкой ваших функций в работу важно каким-либо образом провести валидацию CSS. Недавние исследования Quick Left показали сотни созданных свойств, таких как colro и z-margin, переданных в работу без какого-либо эффекта. Это практически безвредно, но уж точно досадно иметь такое на своем веб-сайте, это показывает вашу невнимательность к мелочам.
В дополнение к программам предварительной обработки для ускорения работы сайта важно сконцентрировать и минимизировать ваши CSS в цифровой объект, который может быть передан через CDN и надежно кэширован браузером при помощи соответствующих заголовков управления кэшем.

Первые шаги в наведении порядка

Если в вашей программной оболочке изначально нет понятия о конвейере обработки цифровых объектов, способных обработать ваши CSS и JavaScript, можно попробовать автономный инструмент. Нам нравится два из таких инструментов – Grunt и Gulp. Они встраиваются в крупные системы развертывания, чтобы либо создавать конструкции при развертывании, либо следить за тем, чтобы они были созданы, и принимать артефакт (скомпилированную CSS) перед развертыванием, что представляет собой два равноправных варианта со своими преимуществами и недостатками.

Содержать CSS в порядке и полной функциональности непросто, это требует постоянного контроля, и часто разработчикам даются более «тяжелые» задания, например, внутренние свойства, или работа во внешней программной оболочке MVC. Однако существуют инструменты, способные добавлять в процесс написания их конструкции и проверки, и которые могут помочь каждому сайту получить то, чего ему не хватает: простые в обслуживании CSS, которые не нужно полностью менять каждые несколько месяцев. Наиболее простая вещь из вышеописанных – начать с простого справочника стилей, так что, если у вашего сайта его все еще нет – дерзайте, начните улучшать свой рабочий процесс уже сегодня!!!
  • +2
  • 11,6k
  • 1
PAYSTO
36,15
Компания
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 1

    +2
    Я одно могу сказать. Используйте БЭМ-методологию и половина вопросов отпадет сама.

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое