Применение CSS к компонентам
Это основной раздел данного цикла статей, посвященный практическим примерам использования CSS для изменения внешнего вида и поведения компонентов веб-интерфейса.
Раздел разбит на несколько статей, освещающих ключевые аспекты работы со стилями компонентов в SberMobile, а также демонстрирующих некоторые полезные возможности CSS, которые могут помочь достичь продвинутых уровней кастомизации пользовательского интерфейса.
Общий рабочий процесс стилизации
Типичный рабочий процесс для пользователя, начинающего редактировать внешний вид компонентов веб-интерфейса, состоит из нескольких шагов, в зависимости от сложности редактируемого компонента:
Добавление простых (не обернутых в селектор) базовых CSS-свойств в доступные поля стилей в редакторе свойств компонента.
Выяснение того, на какой HTML-элемент внутри компонента нужно нацелить селектор, если простые CSS-свойства не применяются там, где нужно.
Добавление целых CSS-правил и их настройка для лучшего соответствия цели.
Написание расширенного набора правил для особых случаев внешнего вида компонента, если это необходимо.
Добавление CSS для альтернативных состояний компонента, если он их поддерживает.
Тестирование компонента во всех его состояниях с различным количеством вложенных данных (если это возможно) в работающей панели.
Расширение стилей компонента с учетом адаптивности.
Тестирование конечных результатов во всех целевых браузерах/устройствах и устранение неполадок.
 | Предполагается, что вы будете использовать встроенные инструменты разработчика браузеров для настройки CSS-селекторов и устранения неполадок, если что-то пошло не так. Прочитайте статью Полезные инструменты браузера, чтобы узнать больше по этой теме. |