Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save EvgenyOrekhov/33f2e011779de5448c8f423c90e39ec9 to your computer and use it in GitHub Desktop.
Save EvgenyOrekhov/33f2e011779de5448c8f423c90e39ec9 to your computer and use it in GitHub Desktop.
Вёрстка глазами программиста

Вёрстка глазами программиста

Проблемы и их возможные решения

Проблема 1: высокая взаимозависимость между HTML и CSS

  • При необходимости изменить положение элементов на странице возникает необходимость изменять их положение в HTML-коде.
  • При необходимости изменить размеры элементов возникает необходимость изменять вложенность HTML-тегов и их классы.
  • Высокая сложность реализации адаптивной вёрстки (например когда необходимо изменять последовательность расположения элементов страницы на разных размерах экранов).

Возможное решение: CSS Grid Layout.

Поддержка в браузерах: https://caniuse.com/#feat=css-grid

Пример: https://codepen.io/mor10/pen/NjeqyX

Ресурсы для изучения:

Проблема 2: высокая сложность HTML-кода

  • Большое количество тегов.
  • Большая вложенность тегов.
  • Большое количество классов у каждого тега.

Возможное решение: classless (бесклассовый) CSS (объявление стилей для тегов, а не для классов).

Примеры classless-фреймворков:

Демо-страница для сравнения фреймворков: https://dohliam.github.io/dropin-minimal-css/

Проблема 3: использование JavaScript вместо CSS

  • Компоненты, использующие JavaScript для стилизации, не вписываются в современные парадигмы разработки frontend-приложений.

Возможное решение: найти/создать компоненты (выпадающее меню, вкладки, аккордеон и др.) на чистом CSS.

Примеры:

Проблема 4: низкая модульность компонентов

  • При необходимости переиспользовать существующий компонент в другом месте страницы или просто переместить HTML-тег в другое место в коде, изменяется (ломается) его отображение на странице.

Возможное решение: верстать каждый компонент отдельно (на один компонент -- один HTML-файл и один CSS-файл); не использовать без необходимости CSS-комбинаторы ( (пробел), + и другие).

Проблема 5: высокая степень дублирования CSS-кода

  • Дублирование значений цветов.
  • Дублирование правил с префиксами для устаревших браузеров.

Возможное решение: CSS variables (переменные), CSS nesting (вложенные правила) и другие современные возможности CSS + transpilation для поддержки устаревших браузеров - https://preset-env.cssdb.org/

Проблема 6: невалидная вёрстка

  • Наличие неоткрытых тегов.
  • Наличие незакрытых тегов.
  • Специфичные для Bootstrap ошибки (например наличие блоков, не имеющих класса .col-*-*, внутри блока с классом .row).

Возможное решение: статический анализ кода

Проблема 7: неконсистентность стиля CSS-кода

  • Неконсистентная расстановка отступов и переносов.
  • Наличие пустых правил.
  • Наличие ненужных свойств с вендорными префиксами.

Возможное решение: статический анализ кода

Требования к вёрстке

  • Необходимо использовать статический анализ кода. Все предупреждения анализаторов должны быть учтены, и все проблемы долны быть исправлены.
  • Общее количество HTML-тегов на странице должно быть сведено к минимуму. Стилизация страниц должна осуществляться с помощью CSS, а не с помощью добавления HTML-тегов. Фон элемента должен быть объявлен как background-image в CSS, а не как тег <img> в HTML, шрифтовые иконки должны быть объявлены у псевдо-элементов ::before или ::after, а не как теги <span> или <i> в HTML, и т. д.
  • Количество CSS-классов должно быть сведено к минимуму. Лучше добавить один класс к родительскому элементу и использовать его в селекторах дочерних элементов, чем создавать отдельные классы для каждого дочернего элемента.
  • Адаптивность страниц должна быть реализована с помощью применения других стилей CSS к существующим HTML-тегам, а не добавлением отдельной HTML-вёрстки.
  • Разработка должна вестись в git-репозитории.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment