Советы по передовой практике, которые помогут вам стать мастером CSS
Каскадные таблицы стилей (CSS) — это основа веб-дизайна, и каждый фронтенд-разработчик должен их изучить. Понимание того, как эффективно использовать их возможности, имеет решающее значение для создания красивых, отзывчивых и удобных в обслуживании веб-приложений.
В этом руководстве мы рассмотрим некоторые лучшие практики CSS, которые следует учитывать при создании приложений!
Прежде чем мы начнем, имейте в виду, что разработчикам — младшим, старшим и другим — крайне важно быть в курсе лучших практик той технологии, на которой они сосредоточены. Ничто не мешает лучшим практикам сегодняшнего дня измениться завтра.
1. Используйте препроцессор CSS
Препроцессоры CSS, такие как Sass или Less, могут помочь вам писать более организованный и модульный код. Они предлагают такие функции, как переменные, примеси и вложенность, которые делают ваш код более удобным в сопровождении и уменьшают избыточность.
2. Организуйте свой код
Организация кода во многом субъективна, но есть общие соображения, которые следует учитывать каждому разработчику.
- Используйте осмысленные имена классов и идентификаторов. Выбирайте описательные имена классов и идентификаторов, которые отражают содержимое или назначение элемента. Например, определения классов в
<li className="navbar-link admin-link">ясно показывают, что это ссылка на панели навигации и что эта ссылка будет видна в пользовательском интерфейсе только пользователям с правами администратора. - Используйте согласованные соглашения об именах. Придерживайтесь соглашения об именах для определений классов CSS и идентификаторов. Это позволит командам разработчиков поддерживать согласованность и улучшать разборчивость своих проектов. BEM, OOCSS и SMACSS — популярные и хорошо документированные соглашения об именах. Альтернативно, вы всегда можете использовать индивидуальное соглашение об именовании, которое соответствует вашим потребностям, при условии, что вы его придерживаетесь.
3. Оптимизируйте определения селекторов
Селекторы CSS используются для поиска элементов HTML, которые вы хотите стилизовать. Существует несколько способов использования селекторов, на которые вы можете ссылаться здесь.
В общем, следует избегать использования слишком специфических селекторов, которые слишком тесно связаны со структурой HTML. Это может затруднить поддержку вашего CSS. Например:
div#container > ul.navigation li.active a.btn-primary span.icon {
/* CSS rules */
}
Хотя этот селектор может работать для конкретного элемента, который вы имеете в виду, он слишком специфичен. Если в структуру HTML будут внесены какие-либо изменения, например добавление новых элементов или изменение их порядка, этот селектор, скорее всего, сломается. Вместо этого отдайте предпочтение более гибким селекторам, например:
.nav-link {
/* CSS rules for navigation links */
}
В этом примере мы используем селектор на основе класса, который нацелен на все навигационные ссылки. Это более удобно в обслуживании и менее подвержено сбоям в случае изменения структуры HTML.
4. Понимание правил специфики CSS
Специфичность — это внутренний расчет, используемый браузерами для определения объявления CSS, наиболее релевантного элементу, и определения значения свойства, применимого к этому элементу.
Понимание того, как работает специфика CSS, позволяет нам оптимизировать селекторы и определения наиболее кратким и понятным способом. Рассмотрим следующий пример:
.container p {
color: blue;
}
.text {
color: red;
}
В первом правиле container p устанавливается синий цвет текста, а во втором правиле .text — красный цвет текста.
Правило .container p имеет специфичность 0-1-1-0 (один селектор класса и один селектор типа). А правило .text имеет специфичность 0-0-1-0 (один селектор класса).
Правило с более высокой специфичностью (.container p) имеет приоритет. Поэтому текст внутри элемента <p> будет синим.
5. Избегайте использования свойства !important.
Касаясь двух последних лучших практик, приведенных выше, является использование свойства !important. Вы можете использовать его, чтобы переопределить ВСЕ предыдущие правила стиля для этого конкретного свойства. Например:
.myParagraph {
color: gray;
}
p {
color: red !important;
}
В этом случае тег p будет иметь цвет red.
В общем случае вам следует избегать слишком частого использования!important и вместо этого полагаться на определения стилей посредством пользовательских имен классов и правильных определений селекторов.
Свойство !important очень разрушительно в том смысле, что оно переопределяет все предыдущие стили для определенного свойства. По мере роста сложности и размера проекта его становится сложнее поддерживать. Деструктивное определение, подобное этому, можно легко пропустить и трудно обнаружить при отладке, а также оно потенциально может привести к побочным эффектам в определениях стилей. Будьте разумны в его использовании!
6. Минимизируйте вложенность
Не следует слишком глубоко вкладывать селекторы CSS в один родительский элемент или отношение родитель-потомок. Возьмем следующий пример:
.wrapper {
// wrapper styles here
.container {
// container styles here
.card {
// card styles here
.content {
// content styles here
.paragraph {
// paragraph styles here
.paragraph-inner-text {
// paragraph-inner-text styles here
}
}
}
}
}
}
По мере того, как ваш проект растет, а вместе с ним и структура таблицы стилей, становится сложно поддерживать огромные объемы вложенного CSS-кода. Глубоко вложенные стили могут повысить специфичность, однако они также затрудняют чтение кода.
Ограничьте вложенность до разумного уровня. Старайтесь избегать вложенности селекторов глубиной более 3 уровней.
7. Модулируйте свой CSS
Модуляризация предполагает разбиение вашего CSS на небольшие повторно используемые модули или компоненты. Такая практика делает вашу кодовую базу более удобной в сопровождении и поощряет повторное использование кода, особенно в крупных проектах. Каждый модуль должен инкапсулировать стили для определенного компонента или функции пользовательского интерфейса.
Например:
/* Button Module */
.button {
/* Button styles */
}
/* Navigation Module */
.navbar {
/* Navbar styles */
}
/* Card Module */
.card {
/* Card styles */
}
Организовав CSS в модули, вы можете легко повторно использовать стили кнопок, панелей навигации и карточек на своем веб-сайте без дублирования кода. Кроме того, если вам нужно обновить стиль определенного компонента, вы можете сделать это в одном месте, гарантируя единообразие.
В более крупных и надежных архитектурах будет еще эффективнее разделить CSS на отдельные файлы и каталоги. Популярным шаблоном, который следует учитывать, является шаблон 7–1, основанный на Sass.
8. Адаптивный дизайн
Адаптивный дизайн — это практика создания веб-дизайна, который адаптируется к различным размерам экрана и устройствам. Приоритет адаптивного дизайна гарантирует, что приложение будет хорошо выглядеть и работать на различных устройствах, от настольных компьютеров до мобильных телефонов.
9. Тестируйте в разных браузерах
Убедитесь, что ваши стили одинаково работают в разных браузерах, протестировав и устранив проблемы совместимости. В качестве справки вы можете использовать платформу CanIUse, чтобы проверить, совместимо ли определение CSS во всех или, по крайней мере, в большинстве браузеров.
10. Документация
Документирование кода CSS включает добавление комментариев или создание внешней документации, объясняющей назначение, использование и важные детали ваших правил и стилей CSS.
Написание документации бесценно, особенно при работе над командными проектами или просто при возвращении через некоторое время к собственному коду. Это особенно полезно при описании внутренних функций сложных обходных путей.
Для получения более подробной документации рассмотрите возможность создания отдельного документа или файла README, в котором объясняется общая архитектура вашего CSS, например соглашения об именах, а также любые конкретные рекомендации или соображения по поддержанию и расширению стилей.
Например:
# CSS Documentation This document provides an overview of the CSS styles used in our project. ## Structure Our CSS is organized into the following: 1. **Components**: Styles related to reusable components, such as forms and buttons. 2. **Layouts**: Styles for to main page layouts and elements related to layouts, such as containers, grids, headers and footers. ## Naming Conventions We follow the BEM (Block Element Modifier) naming convention for our classes. For example: - `.block` for block-level components. - `.block__element` for elements within a block. - `.block--modifier` for modifiers that change a block's appearance. ## Maintenance Guidelines - Avoid excessive nesting to keep our styles maintainable. At most consider 3 levels deep.
- Если вам интересно рассмотреть задачи по программированию, пожалуйста, посмотрите серию Решение проблем!
- А если вам интересно прочитать больше статей, посмотрите серию Как программист!
