Признаки низкого качества вёрстки — различия между версиями
Материал из YourcmcWiki
м |
м |
||
| Строка 4: | Строка 4: | ||
* Невалидный (X)HTML. Например, div внутри a. | * Невалидный (X)HTML. Например, div внутри a. | ||
* Обилие grid layout везде, где надо и где не надо. | * Обилие grid layout везде, где надо и где не надо. | ||
| − | * В целом обилие суперновых фич и низкий уровень совместимости с различными браузерами — IE-то, к счастью сдох, но на этом всё не закончилось и, например, браузер заднеприводных (Safari) тоже иногда ведёт себя не так, как хром и ФФ. | + | * В целом обилие суперновых фич и низкий уровень совместимости с различными браузерами — IE-то, к счастью, сдох, но на этом всё не закончилось и, например, браузер заднеприводных (Safari) тоже иногда ведёт себя не так, как хром и ФФ. |
* Вёрстка таблиц div-ами. С хардкодом ширины и высоты ячеек. | * Вёрстка таблиц div-ами. С хардкодом ширины и высоты ячеек. | ||
* Неустойчивость к контенту (хардкод в целом). Например, съезжание элементов при добавлении пары слов, отсутствие заглушек для фото… | * Неустойчивость к контенту (хардкод в целом). Например, съезжание элементов при добавлении пары слов, отсутствие заглушек для фото… | ||
| + | * Удивительно, но факт — некоторые забывают про то, что круглые картинки делаются через border-radius: 50%, а не тупо через подкладывание картинок, обрезанных по кругу. Возможно, просто стоит отрывать руки за использование фигмы. | ||
* Использование JS. Вёрстка должна быть в рамках HTML+CSS, JS — это удел разработчика, верстальщик его должен применять только в самых крайних случаях. | * Использование JS. Вёрстка должна быть в рамках HTML+CSS, JS — это удел разработчика, верстальщик его должен применять только в самых крайних случаях. | ||
** Некоторые дристальщики до сих пор не могут оторваться от сиси jQuery. | ** Некоторые дристальщики до сих пор не могут оторваться от сиси jQuery. | ||
Версия 00:42, 22 сентября 2021
То, что практикуют говноверстальщики.
- Невалидный (X)HTML. Например, div внутри a.
- Обилие grid layout везде, где надо и где не надо.
- В целом обилие суперновых фич и низкий уровень совместимости с различными браузерами — IE-то, к счастью, сдох, но на этом всё не закончилось и, например, браузер заднеприводных (Safari) тоже иногда ведёт себя не так, как хром и ФФ.
- Вёрстка таблиц div-ами. С хардкодом ширины и высоты ячеек.
- Неустойчивость к контенту (хардкод в целом). Например, съезжание элементов при добавлении пары слов, отсутствие заглушек для фото…
- Удивительно, но факт — некоторые забывают про то, что круглые картинки делаются через border-radius: 50%, а не тупо через подкладывание картинок, обрезанных по кругу. Возможно, просто стоит отрывать руки за использование фигмы.
- Использование JS. Вёрстка должна быть в рамках HTML+CSS, JS — это удел разработчика, верстальщик его должен применять только в самых крайних случаях.
- Некоторые дристальщики до сих пор не могут оторваться от сиси jQuery.
- Некоторые используют swiper вместо вёрстки.
- Обилие :nth-child, означающее жёсткие завязки на число («только 6 картинок») или позиции элементов («первый элемент красный»).
- Использование SASS. Не выпендривайтесь, пишите голый CSS. Профита от SASS почти ноль, автопрефиксер потом припилить — разработчик справится, а вот переделать SASS например в CSS Modules — проблемка.
- Новое слово в жанре: использование svg-спрайтов. Откройте для себя уже иконочные шрифты.
- Отсутствие «общих» элементов. Например, заданного стандартного размера шрифта на страницу, стилей текста, ссылок, более-менее стандартизированных и переиспользуемых элементов управления, форм и т. п.
Резюмировать можно так: стройная система остаётся стройной в любом положении. Так и вёрстка должна иметь устойчивость и сохранять адекватный внешний вид, когда разработчик её меняет в пределах разумного или сочиняет новые странички на основе существующих.
