Признаки низкого качества вёрстки — различия между версиями

Материал из YourcmcWiki
Перейти к: навигация, поиск
м
м
 
(не показаны 3 промежуточные версии этого же участника)
Строка 15: Строка 15:
 
* Новое слово в жанре: использование svg-спрайтов. Откройте для себя уже иконочные шрифты.
 
* Новое слово в жанре: использование svg-спрайтов. Откройте для себя уже иконочные шрифты.
 
* Отсутствие «общих» элементов. Например, заданного стандартного размера шрифта на страницу, стилей текста, ссылок, более-менее стандартизированных и переиспользуемых элементов управления, форм и т. п.
 
* Отсутствие «общих» элементов. Например, заданного стандартного размера шрифта на страницу, стилей текста, ссылок, более-менее стандартизированных и переиспользуемых элементов управления, форм и т. п.
* Также новое слово в жанре: верстальщики, не использующие float.
+
* Также новое слово в жанре: верстальщики, не использующие float…
* Отсутствие нормального разделения на модули (хотя бы логического), то есть, использование одних и тех же css классов в разных несвязанных местах, приводящее к тому, что при правке в одном месте «отваливается» другое. Можно приблизительно охарактеризовать это как «неследование идеологии БЭМ». Не обязательно самому БЭМ, он довольно многословен и потому бывает неприятен, но следовать похожей идеологии нужно. Например, можно видоизменить его так:
+
* …и использующие где попало position: absolute. Особенно там, где нужен был float. А ещё inline-block ведь существует, представляете?!
 +
* Отсутствие нормального разделения на модули (хотя бы логического), то есть, использование одних и тех же css классов в разных несвязанных местах, приводящее к тому, что при правке в одном месте «отваливается» другое. Можно приблизительно охарактеризовать это как «неследование идеологии БЭМ». Не обязательно самому БЭМ, он довольно многословен и потому бывает неприятен, но следовать чему-то похожему нужно, ибо оно решает именно проблему модульности. Например, можно видоизменить его так:
 
** Классы «блоков» называть «.b-xxx», в остальном следуя БЭМ: а) блоки стилизуют только своё содержимое, но не окружение (margin и т. п.) б) блоки не стилизуются вложенно.
 
** Классы «блоков» называть «.b-xxx», в остальном следуя БЭМ: а) блоки стилизуют только своё содержимое, но не окружение (margin и т. п.) б) блоки не стилизуются вложенно.
 
** Классы «элементов» называть без «b-», но НЕ включая в название название блока (в отличие от БЭМ). В остальном следовать оригиналу — элементы стилизовать исключительно в составе блоков (то есть «.b-xxx .element»).
 
** Классы «элементов» называть без «b-», но НЕ включая в название название блока (в отличие от БЭМ). В остальном следовать оригиналу — элементы стилизовать исключительно в составе блоков (то есть «.b-xxx .element»).

Текущая версия на 23:00, 11 ноября 2021

То, что практикуют говноверстальщики.

  • Невалидный (X)HTML. Например, div внутри a.
  • Обилие grid layout везде, где надо и где не надо.
  • В целом обилие суперновых фич и низкий уровень совместимости с различными браузерами — IE-то, к счастью, сдох, но на этом всё не закончилось и, например, браузер заднеприводных (Safari) тоже иногда ведёт себя не так, как хром и ФФ.
  • Вёрстка таблиц div-ами. С хардкодом ширины и высоты ячеек.
  • Неустойчивость к контенту (хардкод в целом). Например, съезжание элементов при добавлении пары слов, отсутствие заглушек для фото…
  • Удивительно, но факт — некоторые забывают про то, что круглые картинки делаются через border-radius: 50%, а не тупо через подкладывание картинок, обрезанных по кругу. Возможно, просто стоит отрывать руки за использование фигмы.
  • Использование JS. Вёрстка должна быть в рамках HTML+CSS, JS — это удел разработчика, верстальщик его должен применять только в самых крайних случаях.
    • Некоторые дристальщики до сих пор не могут оторваться от сиси jQuery.
    • Некоторые используют swiper вместо вёрстки. Даже вместо своего же горячо любимого grid layout-а.
  • Обилие :nth-child, означающее жёсткие завязки на число («только 6 картинок») или позиции элементов («первый элемент красный»).
  • Использование SASS. Не выпендривайтесь, пишите голый CSS. Профита от SASS почти ноль, автопрефиксер потом припилить — разработчик справится, а вот переделать SASS например в CSS Modules — проблемка.
  • Новое слово в жанре: использование svg-спрайтов. Откройте для себя уже иконочные шрифты.
  • Отсутствие «общих» элементов. Например, заданного стандартного размера шрифта на страницу, стилей текста, ссылок, более-менее стандартизированных и переиспользуемых элементов управления, форм и т. п.
  • Также новое слово в жанре: верстальщики, не использующие float…
  • …и использующие где попало position: absolute. Особенно там, где нужен был float. А ещё inline-block ведь существует, представляете?!
  • Отсутствие нормального разделения на модули (хотя бы логического), то есть, использование одних и тех же css классов в разных несвязанных местах, приводящее к тому, что при правке в одном месте «отваливается» другое. Можно приблизительно охарактеризовать это как «неследование идеологии БЭМ». Не обязательно самому БЭМ, он довольно многословен и потому бывает неприятен, но следовать чему-то похожему нужно, ибо оно решает именно проблему модульности. Например, можно видоизменить его так:
    • Классы «блоков» называть «.b-xxx», в остальном следуя БЭМ: а) блоки стилизуют только своё содержимое, но не окружение (margin и т. п.) б) блоки не стилизуются вложенно.
    • Классы «элементов» называть без «b-», но НЕ включая в название название блока (в отличие от БЭМ). В остальном следовать оригиналу — элементы стилизовать исключительно в составе блоков (то есть «.b-xxx .element»).
    • Классы «модификаторов» тоже называть без «b-» и без названия блока/элемента (либо можно тоже выделить, например, через «m-»), а стилизовать, как и в оригинале, только вместе с классом блока/элемента (то есть «.b-xxx .element.modificator»).

Резюмировать можно так: стройная система остаётся стройной в любом положении. Так и вёрстка должна иметь устойчивость и сохранять адекватный внешний вид, когда разработчик её меняет в пределах разумного или сочиняет новые странички на основе существующих.