Comments 14
Если xl равен 1.5, то 2xl равно 3. А вот 1.75 - это наверно xxl.
мне нравится способ именования переменных привычный многим из бутстрапа или таилвинда. касаемо цветов чтобы, например, не возникло ситуации когда у нас много серых цветов в проекте и light gray, gray и dark gray уже недостаточно - именовать их как gray-100, gray-200, gray-300... а для размеров это xs, sm, md, lg, xl, 2xl. и т.д. как по мне эти два подхода знакомы куда большему количеству людей и более гибкие, если рассматривать цвета
Начнём с названия переменных для цвета. Я выделяю несколько групп: основной цвет, цвет акцента и вспомогательный цвет. Для каждой переменной есть базовый, более светлый и тёмный оттенки.
А для чего это? Разве это всё не пляшет от дизайн-макета и количества цветов в нём?
Постфиксы
-lightи-darkтакже отлично подходят для свойств, которые могут быть тоньше и толще. Например, начертание шрифта.
Да нет. В том же CSS для этого используется light, regular, medium, bold... Вот это отлично подходит)) Вплоть до того, что можно и не заводить отдельную переменную))
Эти свойства я использую всегда, когда требуется установить значения только по одной оси. Надеюсь, и вам они помогут.
Ну тут же сразу виден потенциальный баг, если контейнер сменит свойство display (при смене адаптива) или позиционирование...
Начнём с названия переменных для цвета. Я выделяю несколько групп: основной цвет, цвет акцента и вспомогательный цвет.
А почему бы не именовать переменные цвета по названию цвета? Например, так:
$font-color--light-slate-grey: #85888F;
$font-color--tangerine: #EF8711;Имена можно брать тут: http://www.htmlcsscolor.com
Мне тоже временами очень сложно дать название переменной) целое испытание) взял для себя полезности из статьи, спасибо. Подскажи пожалуйста, в вёрстке блока у тебя тег 'p' обернут ещё в 'div', обертка для какой цели?
Есть несколько причин. Первая, контейнер нужен на случай нескольких абзацев. Вторая, я не добавляю атрибут class для элементов, где есть типографика. Стили вешаю через :not([class]). Получается у меня так:
<body class="page">
<section class="page__section">
<h2 class="page__section-heading">About me</h2>
<div class="page__section-content">
<p>I'm a content creator.</p>
<p>I'm an accessibility designer.</p>
</div>
</section>
</body>p:not([class]) {
margin-block: 1.5rem 0;
}
>Только этот код легко сломать, переместив медиа-запрос перед основным кодом. Так значение 2.5rem переопределят значения 2rem и 1rem.
ну вообще то поток идет сверху вниз (всегда), и читается так же, поэтому эта ситуация о перемещении блока с медиа-запросом выше "основного кода" кажется странной...
Магия CSS на практике: советы по вёрстке от гика. Часть 2