💡 Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss

▍Часть 3

Если возникает необходимость так написать, значит, что-то пошло не так на этапе именования, нужно незамедлительно вернуться к Jade и исправить атрибуты class так, чтобы каждый блок был независимым. Если же заплатка нужна срочно и времени на изменения разметки нет, то оставьте комментарии TODO в обоих документах: в scss и в jade.

Говоря о том, что блок не знает о других блоках, хочется вкратце упомянуть об одном полезном псевдоклассе, о котором постоянно забывают новички. Представьте лейаут верхнего уровня: есть блок с основным контентом и блок aside. Для двух этих блоков указана ширина в %, но на одной странице aside нет и ширина блока с основным контентом должна быть 100%. Тут нам на помощь придет псевдокласс only-child: пример.

В случаях, когда only-child не подходит, используйте модификаторы.

WebDEV #советы #web

📖 Amazon Web Services in Action
🖋 Andreas Wittig, Michael Wittig, 2018

Amazon Web Services in Action - это всеобъемлющее введение в вычисления, хранение данных и создание сетей в облаке AWS. Вы найдете четкое и актуальное освещение всех основных сервисов AWS, которые вам нужны, с акцентом на лучшие практики обеспечения безопасности, высокой доступности и масштабируемости.

💾 Скачать книгу

WebDEV #book #web

🛠 Cssbattle — создавайте различные фигуры на CSS в каждом челлендже и улучшайте свои навыки.

WebDEV #инструменты #css

💡 Не используйте миксины, когда можно использовать миксины

Миксины очень помогают следовать принципу DRY (Don’t Repeat Yourself), их активно используют в scss для таких абстрактных задач, как сетка, но о них почему-то забывают, когда речь заходит о верстке компонент. Например, у вас есть кнопки разных цветов, у которых на ховере происходит инверсия цвета. Для инверсии можно написать миксин и сделать стили чуточку чище.

Также советуем обратить внимание на плейсхолдеры, которые, к сожалению, редко встречаются в верстке новичков.

В Jade тоже следует активнее использовать миксины. Например, для svg-спрайтов. Пример можно посмотреть здесь.

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Amazon Web Services in Action.

2. Cssbattle — создавайте различные фигуры на CSS в каждом челлендже и улучшайте свои навыки.

3. Ошибка: блоки влияют друг на друга, одни и те же селекторы встречаются в нескольких местах в scss.

WebDEV #test #js

Выберите правильный вариант 👇🏼

💡 Ошибка: беспорядок в медиазапросах

Частая ошибка — смешивать 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

NestJS за 100 секунд

Nest — это прогрессивная платформа для создания серверных приложений и API-интерфейсов с помощью Node.js.

📺 YouTube

WebDEV #видео #NestJS #js

🛠 100dayscss — создайте за 100 дней что-нибудь прекрасное и выведите свои навыки CSS на новый уровень. Новые задачи каждый день!

WebDEV #инструменты #css

💡 Ошибка: беспорядок в медиазапросах

▍Часть 2

В scss есть возможность вкладывать медиазапросы в правила. Например:

.block {
    width: 100%;
    @media screen and (min-width: 768px) {
        width: 60%;
    }
}

Это будет скомпилировано в:

.block {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .block {
        width: 60%;
    }
}

Так писать медиазапросы довольно удобно, тогда один селектор будет встречаться строго в одном месте в стилях. В таком случае обязательно использовать переменные для основных брейкпоинтов. Должно быть так, чтобы по названиям переменных можно было легко определять, какой брейкпоинт соответствует устройству (по спецификации и макетам проекта), а какой был написан специально под контент.

Большое количество медиазапросов не сказывается ощутимо на производительности, но, разумеется, сказывается на весе css документа. Если у вас большой проект со сложной организацией контента, медиазапросов много, то стоит задуматься об их комбинации.

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. NestJS за 100 секунд.

2. 100dayscss — создайте за 100 дней что-нибудь прекрасное и выведите свои навыки CSS на новый уровень.

3. Ошибка: беспорядок в медиазапросах.

💡 Ошибка: не интересоваться UX-проектированием

Не часто встретишь UX-проектировщика и верстальщика в одном лице. Но верстальщикам время от времени приходится принимать решения, которые могут повлиять на взаимодействие: сделать его удобным или отвратительным, в зависимости от того, как будет сверстан компонент. Не важно, верстаете ли вы под мобильные без макета или просто добавляете кнопку, о которой забыли на этапе проектирования, вам нужно как минимум знать основы.

Для начала предлагаем обратить внимание на типичную ошибку новичка: ссылки и кнопки маленького размера, между ними мало пространства. Это ок, если взаимодействие происходит мышкой, но совершенно не годится, когда речь идет о тач-устройствах. Многократные попытки попасть по ссылке, которые в результате приводят к попаданию по соседней ссылке, очень быстро выводят пользователей из себя. Наверняка каждый из нас бывал в такой ситуации, и первое, что хочется сделать, — покинуть неудобный сайт.

WebDEV #советы #web

📖 Web Design Playground
🖋 Paul McFedries, 2019

Автор книги проведет вас по длинному пути обучения веб-разработке от написания первой строки HTML-кода до создания интересных и привлекательных веб-страниц. Поработав с данной книгой и изучив несколько проектов, разбор которых включен в нее, вы прокачаете свои навыки в веб-дизайне.

💾 Скачать книгу

WebDEV #book #html #css #web

🛠 Codementor — совершенствуйтесь в программировании, работая над реальными проектами.

WebDEV #инструменты

💡 Ошибка: все в пикселях, даже font-size

Советуем сделать (если вы еще нее сделали) переход с px на em и rem для таких значений, как:

— размер шрифта и высота строки,
— размеры иконок,
— размеры кнопок,
— вертикальный ритм.

В рамках БЭМ для блока: rem для размера шрифта блока, em — для остальных величин блока. Для элемента есть 2 стратегии:

1) em для размера шрифта, если структура html уже утвердилась и вряд ли добавится / убавится еще один уровень вложенности,

2) rem — если в рамках блока вероятны изменения (перемещение элементов, добавление или удаление оберток и т.п.).

Чтобы понять разницу между единицами изменения или выбрать между em и rem, предлагаем обратить внимание на канал DevTips, на котором в весьма непринужденной форме объясняются основы верстки.

Также с псевдоэлементами и em стоит быть осторожней:

«Если в IE9+для одного и того же псевдоэлемента задать размер шрифта через разные селекторы, то он просто перемножит все размеры шрифтов.» (источник)

WebDEV #советы #web

🔥 Лучшее на канале за неделю

1. Web Design Playground.

2. Codementor — совершенствуйтесь в программировании, работая над реальными проектами.

3. Ошибка: не интересоваться UX-проектированием.

WebDEV #test #js

Выберите правильный вариант 👇🏼