- При необходимости изменить положение элементов на странице возникает необходимость изменять их положение в HTML-коде.
- При необходимости изменить размеры элементов возникает необходимость изменять вложенность HTML-тегов и их классы.
- Высокая сложность реализации адаптивной вёрстки (например когда необходимо изменять последовательность расположения элементов страницы на разных размерах экранов).
Возможное решение: CSS Grid Layout.
Поддержка в браузерах: https://caniuse.com/#feat=css-grid
Пример: https://codepen.io/mor10/pen/NjeqyX
Ресурсы для изучения:
- https://www.youtube.com/watch?v=7kVeCqQCxlk
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
- https://gridbyexample.com/examples/
- Большое количество тегов.
- Большая вложенность тегов.
- Большое количество классов у каждого тега.
Возможное решение: classless (бесклассовый) CSS (объявление стилей для тегов, а не для классов).
Примеры classless-фреймворков:
- https://github.com/EvgenyOrekhov/holiday.css
- https://shoelace.style/
- https://kbrsh.github.io/wing/
- https://milligram.io/
- https://picnicss.com/
- https://mblode.github.io/marx/
- https://oxal.org/projects/sakura/
Демо-страница для сравнения фреймворков: https://dohliam.github.io/dropin-minimal-css/
- Компоненты, использующие JavaScript для стилизации, не вписываются в современные парадигмы разработки frontend-приложений.
Возможное решение: найти/создать компоненты (выпадающее меню, вкладки, аккордеон и др.) на чистом CSS.
Примеры:
- https://codepen.io/andornagy/pen/xhiJH - выпадающее меню со вложенностью на чистом CSS
- https://codepen.io/MarekZeman91/pen/wBwbrp - вкладки на чистом CSS
- При необходимости переиспользовать существующий компонент в другом месте страницы или просто переместить HTML-тег в другое место в коде, изменяется (ломается) его отображение на странице.
Возможное решение: верстать каждый компонент отдельно (на один компонент -- один
HTML-файл и один CSS-файл); не использовать без необходимости CSS-комбинаторы
( (пробел), + и другие).
- Дублирование значений цветов.
- Дублирование правил с префиксами для устаревших браузеров.
Возможное решение: CSS variables (переменные), CSS nesting (вложенные правила) и другие современные возможности CSS + transpilation для поддержки устаревших браузеров - https://preset-env.cssdb.org/
- Наличие неоткрытых тегов.
- Наличие незакрытых тегов.
- Специфичные для Bootstrap ошибки (например наличие блоков, не имеющих класса
.col-*-*, внутри блока с классом.row).
Возможное решение: статический анализ кода
- Неконсистентная расстановка отступов и переносов.
- Наличие пустых правил.
- Наличие ненужных свойств с вендорными префиксами.
Возможное решение: статический анализ кода
- Необходимо использовать статический анализ кода. Все предупреждения анализаторов должны быть учтены, и все проблемы долны быть исправлены.
- Общее количество HTML-тегов на странице должно быть сведено к минимуму.
Стилизация страниц должна осуществляться с помощью CSS, а не с помощью
добавления HTML-тегов. Фон элемента должен быть объявлен как
background-imageв CSS, а не как тег<img>в HTML, шрифтовые иконки должны быть объявлены у псевдо-элементов::beforeили::after, а не как теги<span>или<i>в HTML, и т. д. - Количество CSS-классов должно быть сведено к минимуму. Лучше добавить один класс к родительскому элементу и использовать его в селекторах дочерних элементов, чем создавать отдельные классы для каждого дочернего элемента.
- Адаптивность страниц должна быть реализована с помощью применения других стилей CSS к существующим HTML-тегам, а не добавлением отдельной HTML-вёрстки.
- Разработка должна вестись в git-репозитории.