Упрощаем работу с CSS, 7 советов

Если Вы уже работали с CSS, то знаете, что в этих дебрях крайне легко заблудиться. Особенно при разработке действительно сложных проектов, со множеством шрифтов и цветов.

Мы поделимся собственными лайфхаками по упрощению работы с CSS. Все опробовано в работе и неоднократно доказало свою эффективность. Итак, 7 эффективных приемов по упрощению работы с CSS!

Типографика

Объявляйте все свойства, на которые влияет шрифт, в одном месте. Прием позволяет добавлять классы шрифтов, подходящие для заданного шрифта. Используя прием помните, что после такого объявление нельзя использовать font- или text-.

Если объявить свойства с font-face, сайт всегда отобразится корректно. Устанавливайте размер шрифта в единицах rem. Иная настройка легко приведет к проблемам с вложениями элементов.

Цвета

Опытного программиста сложно удивить большим количеством цветов. Часто случается, что предстоит работать с достаточно прохожими символьными значениями цветов, типа #123456 и #123457. Чтобы избежать путаницы, используйте банальные классы цветов. 

Еще одной неприятностью может быть недостаточная осведомленность об использовании альфа-канальных цветов. По умолчанию, rgba() и hsla() отвечают за задачу цветов. Если значение отлично от 1, цвет получится полупрозрачным. То есть, цвет будет восприниматься пользователем с учетом того, что находится “позади” полупрозрачного цвета.

CSS Grid Layout

Данный инструмент позволяет организовывать контент без дополнительных контейнерных элементов. Большинство дизайнеров работает с 12-колонной сеткой, а фреймворк позволяет ей следовать.

Интервалы и сетки должны не ограничивать контент, а организовывать. Не стоит сразу полагаться на сетку. Их невозможно заточить заранее под определенный формат, поэтому излишне доверять им не стоит.

:focus и :hover

Псевдокласс :focus крайне не рекомендуется изменять. Это индикатор элемента, находящегося в фокусе на данный момент. Если добавляете стили :hover, откажитесь от использования псевдоселекторов, если подобное проделано для :focus.

Селекторы

Используйте классы и селекторы классов вместо привычных id, type и универсальных селекторов. Рекомендация вызвана необходимостью борьбы со слишком большим охватом универсальных селекторов.

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

Также, селекторы могут оказаться слишком специфичными. Если подобное произошло, такой селектор сгенерирует еще более специфичный селектор. Подобная тенденция приведет к возникновению существенных препятствий для изменения стиля элемента. Самые запущенные случаи приводят к “хрупким” таблицам, и вряд ли кто-то захочет с ними работать в дальнейшем.

z-index

Старайтесь любым способом избегать внедрение и использование z-index. Для его корректной настройки, необходимо глубокое знание SCSS-математики, что есть в скилах далеко не каждого верстальщика.

Облегчите себе жизнь и замените z-index структурой HTML. Это позволит провести натуральную укладку элементов. Также, попробуйте к элементам и родителям добавить новый контекст наложения.

Псевдоэлементы

Многие стилистические интересности завязаны на использовании псевдоэлементов ::before и ::after. Рекомендуем оставлять их пустыми, для корректного отображения красоты. Заполнение псевдоэлементов приведет к усиленной нагрузке на устройство, для отображения эффектов, с чем слабые устройства будут долго справляться.

Напутствие новичку

Если Вы только ступили на скользкую дорожку верстальщика, подобные наставления обязательно найдут отображение в работе. Рекомендуем запомнить это, а лучше записать.

Уже знающим верстку на достаточном уровне порекомендуем сосредоточится на изучении подобных рекомендаций в нашем блоге и на просторах сети. Это действительно экономит время, а в нашей профессии — это деньги!

Оцените статью