Требования к современной верстке?

Question

[Faber Estello]

Есть ли где-нибудь обновленные чек-листы по верстке (front-end html/css) 2020?
Статьи или boilerplate или инструменты?
Есть ли готовые webpack сборки именно для верстки?

Answer 1

[Андрей]

Вот https://frontendchecklist.io/

Comments

[Faber Estello]

Что-то не понятно как пользоваться! Я имею ввиду, можно ли свой сайт проверить или это просто перечень всего возможного что есть в веб (с подсветкой что важнее, а что менее важно)?

[alex]

Faber Estello, для задающих подобные вопросы это неудивительно

[Faber Estello]

С таким успехом можно было просто ссылку на canIuse сбросить и все)

[Одиночка Айс]

Вы что!!! Это устарело на 2 года уже как! В 2020 уже новые тренды! ТС, вас дурят!

[Ankhena]

Faber Estello, в смысле, вы не можете сами проверить свою работу по пунктам и хотите, чтобы это сделал кто-то за вас?
Ради бога, услуги называются "аудит сайта с точки зрения кода/SEO/юзабилити" и т.д. подставить нужное. Цены и эффективность различные, на любой вкус.

[uRoot]

Faber Estello,

Я имею ввиду, можно ли свой сайт проверить

Воспользуйтесь валидатором

https://validator.w3.org/
https://validator.w3.org/unicorn/?ucn_task=full-cs...

[ray_qwer]

Google Insights встроен в Dev tools

[Алекс Глебов]

или это просто перечень всего возможного что есть в веб

Это небольшой чеклист. Спокойно можно и из 200-300 пунктов собрать для качественного проекта

[Bender_Render]

ray_qwer, таксебе инструмент

[Aleksandr Ataakgayev]

ray_qwer, вкладка Audits))

Answer 2

[DeniSidorenko]

Хочется дополнить ответы что написали выше. Умение писать правильный код который можно будет интегрировать с движком. Часто бывает что сдают верстку, визуально вроде все окей, но код настолько не структурирован и не логичен что ужас. Много кастомных классов где не требуется. К примеру каждый слайд- в слайдере имеет свой класс и стилизуется отдельно ( когда это можно было не делать) .При выводе из базы данных - очень много проблем создает.
Редко когда встречается хорошая аккуратная верстка, которая изначально предполагает что контент будет меняться . За частую при смене даже фото - все летит.

Answer 3

[Эркин Бахтушкин]

https://hackernoon.com/hn-images/1*YTP0ii6kEqZtxUN...

Также советую использовать вот это при верстке. На текущий момент это лучший стартовый репозитарий на основе gulp в рунете.
https://nicothin.pro/page/my-start-kit

Comments

[Faber Estello]

Картинку приходилось встречать ранее, действительно, полезная до сих пор вещь! И за ссылку спасибо, интересно!

Answer 4

[Игорь Стасюк]

Что для верстки:
1. Media queries; знание mobile first верстки;
2. Адаптивная и кроссбраузерная (да в 2к20 иногда приходится поддерживать IE, к тому же в Mozilla и Safari все может выглядить иначе) верстка;
3. Flex box;
4. CSS grids;
5. SASS/SCSS/PostCSS (и плагины к нему);
6. Шаблонизаторы ( pug, nunjucks) и сборщик Gulp;
7. Знание современных HTML тэгов;
8. Базовые знание JQuery и отличные знания и понимание "ванильного" JS и ES6+ Javascript стандартов;
9. Паттерны верстки;
10. Понимание и использование на практике Bootstrap сетки и самого CSS фреймворка.

Добавлю что для структуризации как раз можно использовать BEM подход написания кода. Так же можно использовать в css / pug компонентный подход

Если что-то забыл, дополните меня господа любезные

Comments

[Михаил]

доступность

[beduin01]

>Базовые знание JQuery
Уже много лет как не актуально

[lexstile]

beduin01, почему?

[beduin01]

lexstile, ну потому что есть куча фреймворков в которых типовые задачи проще\быстрее можно сделать

[lexstile]

beduin01, подскажите, пожалуйста, какие фреймворки имете ввиду?

[beduin01]

lexstile, Vue тот же великолепно цепляется как библиотека если нужно что-то совсем простое сделать.

[lexstile]

beduin01, частично соглашусь, все же, у Vue порог входа повыше будет, хотя он и более будет соответствовать трендам.
Сейчас очень много крупных проектов, которые используют jQuery, тот же Тостер.
Может тренд и идет на спад (хотя у меня нет статистики), тем не менее, библиотека присутствует на каждом втором сайте, а то и больше.

[Игорь Стасюк]

beduin01, все еще актуально для мелких и быстрых задач по верстке, чтоб знать на базовом уровне, для тех же быстрых слайдеров или чего-то подобного.
Я дал советы конкретно по верстке, а не front-end разработке, если автора вопроса интересует еще и это то допишу отдельно

[Игорь Стасюк]

lexstile, соглашусь, Vue все таки это фреймворк для ФЕ разработки и использовать его как "библиотеку" для чего-то мелкого можно, но не целесобразно

[Vaultboy84]

Бред какой то, понаписали все что знали видимо...

[Faber Estello]

Вы не поняли вопроса!!! Вопрос не в том что нужно для верстки, а что НОВОГО!