Когда мы начинаем работать над существующей базой кода, первое, что нам нужно сделать, — это провести CSS-аудит. Основной вред от плохо организованных и пренебрегаемых CSS-таблиц — это замедление процесса разработки, поскольку команде разработчиков приходится продираться через дебри кода, и неработающий сайт, если неправильно определенные селекторы вызывают коллизии и перекрытие стилей.
Этот аудит помогает оценить, насколько хорошо организован CSS проекта, насколько актуален конвейер, отвечающий за их оценку и сборку, а также насколько хорошо структурирована и дисциплинирована команда, пишущая CSS. Вот несколько шагов, которые вы можете использовать для проведения собственного аудита CSS: CSS-системы На что нужно обратить внимание Есть ли в вашем проекте файл CSSReadme или другой аналогичный документ, описывающий, как писать CSS для этого проекта? Наиболее успешные проекты начинаются с более жестких систем, таких как SMACSS, BEM или OOCSS, и модифицируют их с учетом последующих предложений и структуры.
Если его нет в вики Github, в README основного проекта или в инструкциях для нового разработчика в команде, предположим, что его не существует. В конечном итоге система CSS должна содержать рекомендации по следующему: • Как называть вновь созданные файлы и когда их создавать • Как выбрать имена для свойств класса и идентификатора • Какие свойства CSS3 поддерживаются на сайте? • Какие варианты синтаксиса предпочтительнее в проекте (можно ли использовать однострочные скрипты?) Как это поможет CSS сайта увеличивается из-за прихотей отдельных разработчиков.
Некоторые из них перед написанием правила тратят время на проверку наличия нужного селектора, другие — нет. Система извлекает предположения и мнения из записей CSS; разработчики могут только сделать так, чтобы это выглядело хорошо, а не изобретать свои собственные правила.
Первые шаги в наведении порядка Рассмотрим описанные выше системы и представьте их преимущества и недостатки.
Обсудите с остальной командой проекта, что они считают наиболее важным в своих таблицах стилей, и выберите то, что лучше всего соответствует вашим целям.
Самый безопасный способ интегрировать новую систему в существующий веб-сайт — делать это медленно, по одной странице за раз.
С помощью системы можно выполнять новые разработки, а затем повторно примененные стили можно переносить на ранее созданные страницы.
Кроме того, если происходит модернизация конвейера, это прекрасная возможность начать все сначала с полной переработки материала.
Иногда это единственный способ быть уверенным.
Справочник стилей На что нужно обратить внимание Ответственная команда разработчиков CSS должна иметь «кухонную мойку» для компонентов и стилей, составляющих веб-сайт, за который они несут ответственность.
Когда новому разработчику поручается разработать дизайн страницы, не всегда удобно просматривать страницы CSS или даже знать, где найти тот или иной элемент в продукте.
Справочник стилей — это страница, доступная только разработчикам, на которой показаны стили и компоненты, уже созданные для сайта, поэтому к ним можно прикрепить легенду, что экономит время и уменьшает количество дублирующихся стилей.
Как это поможет Наличие активной страницы, на которую вы всегда можете обратиться, облегчает поиск того же самого синего текста во всплывающем окне компьютера, который только что был помещен на ваш рабочий стол.
Не каждый разработчик досконально знает весь веб-сайт, поэтому эта «подсказка» побуждает разработчика использовать существующие стили, а не изобретать велосипед за счет своего времени.
Первые шаги по наведению порядка В следующий раз, когда кто-то создаст новое свойство или элемент, ему нужно будет пометить его и использовать где-нибудь на новой странице, которая уже содержит существующие таблицы стилей.
Это станет зародышем вашей книги стилей, и вам следует попытаться создать на этой странице новые элементы и компоненты, сначала протестировав их функциональность в изолированном пространстве, а затем перенести их на страницу, для которой они изначально предназначались.
Трубопровод На что нужно обратить внимание Где-то в документации вашего сайта должно быть описание конвейера обработки цифровых объектов, и нас особенно интересует обработка CSS. Это может быть Gruntfile, указывающий на задачи, которые необходимо выполнить, или вы можете использовать такую структуру, как Rails, с множеством функций обработки.
Как это поможет Писать сырой CSS — это не круто.
Программы предварительной обработки, такие как Sass и Less, устраняют большинство трудностей в процессе написания CSS и поощряют хорошие привычки в отношении функций и переменных.
Важно каким-либо образом проверить CSS перед отправкой функций в производство.
Недавнее исследование Quick Left показало, что сотни созданных свойств, таких как colro и z-margin, передаются в работу без какого-либо эффекта.
Это практически безвредно, но его наличие на вашем сайте определенно раздражает, поскольку это показывает ваше невнимание к деталям.
Помимо программ предварительной обработки для ускорения вашего сайта, важно сконцентрировать и минимизировать ваш CSS в цифровой объект, который может обслуживаться через CDN и надежно кэшироваться браузером с использованием соответствующих заголовков управления кэшем.
Первые шаги по наведению порядка Если ваша платформа изначально не имеет концепции конвейера обработки цифровых объектов, который может обрабатывать ваш CSS и JavaScript, вы можете попробовать отдельный инструмент. Два из этих инструментов, которые нам нравятся, — это Grunt и Gulp. Они встроены в большие системы развертывания, чтобы либо создавать конструкции при развертывании, либо гарантировать, что они будут созданы и принять артефакт (скомпилированный CSS) перед развертыванием, что представляет собой два равных варианта со своими преимуществами и недостатками.
Поддерживать чистоту и полную функциональность CSS непросто, это требует постоянного мониторинга, и часто разработчикам поручаются более «тяжелые» задачи, такие как внутренние свойства или работа во внешней среде программирования MVC. Однако существуют инструменты, которые могут добавить дизайн и проверку в процесс написания, которые могут помочь каждому сайту получить то, чего ему не хватает: простой в обслуживании CSS, который не нужно полностью менять каждые несколько месяцев.
Самый простой способ — начать с простого руководства по стилю, поэтому, если на вашем сайте его еще нет, начните улучшать свой рабочий процесс уже сегодня!!! Теги: #CSS #код аудита #CSS
-
Заполнение Онлайн-Опросов За Наличные
19 Oct, 24 -
Мобильная Разработка. Галерея Шаблонов
19 Oct, 24 -
Zfs В Linux: Почти Хорошо
19 Oct, 24 -
Цитировать
19 Oct, 24 -
Как Вы Относитесь К Windows 8?
19 Oct, 24 -
Мифическая Сила Контракта
19 Oct, 24
