Прежде чем идти дальше, нужно научиться нормально верстать
Привет! Вы получили первое большое задание — сверстать макет UberEats.
Но мы до этого проходили достаточно примитивные вещи, а сейчас — огромный пакет. Как подступиться?
Помните главный принцип: от общего к частному.
Этого принципа вам нужно придерживаться всегда: когда вы разбиваете задачи на мелкие, когда вы верстаете целую страницу, когда вы придумываете имена селекторами. От общего к частному.
Первое, что вам нужно запомнить — ваш код должен быть чистым. Не идеальным, а чистым.
Даже если вы написали говнокод, он должен быть красиво отформатирован: нельзя, чтобы у кода плясал стиль — отступы, иМеНоВАнИе ТеГоВ и КЛ_АССОВ.
Но помните, что стиль кода не должен быть причиной для споров. Просто используйте общедоступный стайлгайд (codeguide.co для вёрстки, airbnb/javascript для джса), настройте редактор на него и забудьте. Не тратьте ваше время на споры про табы или пробелы — вам нужно код писать, а не этой мелочью заниматься.
В Вскоде есть встроенный форматтер для вёрстки, а для Джса можно ставить prettier.
Часто спрашивают "зачем нужны все эти теги, если можно просто дивами пользоваться! это же не так неудобно".
Семантика нужна людям и машинами: людям она помогает отделять логические блоки, машинам — распознавать разметку и строить понимание страницы.
Если вы будете видеть <footer> в хедере, вы же удивитесь? А если <aside> для оформления блоков-этажей? Странно ведь будет: вы же не едите сок вилкой, верно?
Семантичный код удобно считывать: «о, здесь навигация, раз она в <nav>, а здесь у нас какой-то большой блок, раз он в <section>».
Не плодите своих велосипедов, используйте готовое решение. Используйте normalize.css, а не руками пишите * { padding: 0 }.
В будущем мы познакомимся с пакетным менеджером для фронтэнда и бэкэнда на джаваскрипте: npm.
В вёрстке принято стилизовать только по классам: по тегам слишком опасно, а айди нужен для внутренних ссылок на блоки и для джаваскрипта.
Очень плохо
h1 {
}
#title {
}
header > h1 {
}
footer ul li {
}Не нужно оформлять элементы через ul / li — списки используются только для списков в тексте, их не нужно тащить для оформления списка карточек или чего-то ещё.
Первое, что нужно сделать в вёрстке — накидать каркас страницы, а потом его стилизовать.
В дизайне и вёрстке есть термин "этаж" — это блок. Насколько я помню, термин прошёл из Бюро, про этажи наглядно раскрывается в этих советах:
- Как комбинировать ритмы колоночных сеток?,
- Как теория близости работает в интерфейсе: часть первая и вторая,
- Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках?.
Отверстайте страницу сначала этажами, а потом — стилизуйте. Так будет проще найти общие элементы и не придется плодить стили.
БЭМ — это правила именования классов. БЭМ — это компонентный подход "на минималках", как говорится: если у вас под рукой только ХТМЛ и ЦСС, то БЭМ отлично подойдёт.
Если вам кто-то рекомендует не использовать БЭМ, то это потому, что человек уже использует другие способы компонентного подхода: CSS Modules или styled-components.
Так что запомните: БЭМ отличный, когда под рукой только ХТМЛ и ЦСС.
Обращайте внимание на шрифты, отступы, не вздумайте от себя что-то придумывать, если дизайн кривой — скажите об этом дизайнеру, а не пытайтесь сами изменить.
Очень часто фронтэндеры убивают дизайн — не обращают внимания на шрифты, отступы между элементами ставят от пизды. Это неправильно.