Канал о web-разработке. Новости IT, туториалы, веб-программирование и многое другое.
mobile-first и desktop-first подходы. Сейчас, когда IE8 перестал фигурировать в спеках, можно смело переходить на mobile-first. Если макеты готовы только для десктопа, попробуйте повлиять на дизайнера, ссылаясь, например, на эту книгу. В любом случае, будете вы использовать min-width или max-width, используйте что-то одно. Иначе в какой-то момент станет тяжело отслеживать логику изменения стилей, а значит, проблематично поддерживать верстку.
Кроме того, не стоит писать медиазапросы по хардкоду, используйте как минимум переменные для брейкпоинтов. Т.е. вместо:
@media (min-width: 1024px)должно получиться:
$laptop-landscape: 1024px; @media (min-width: $laptop-landscape)Переменные для брейкпоинтов стоит хранить в отдельном документе или в layout.scss. Можно пойти дальше, прочитать эту статью и выбрать один из предложенных подходов (или написать свой). Продолжение следует... WebDEV #советы #web
class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.
Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child: пример.
В случаях, когда only-child не подходит, используйте модификаторы.
WebDEV #советы #web.block {
&:hover .another-block__element {
color: red;
}
}
Продолжение следует...
WebDEV #советы #web