Знаете ли вы, что картинки можно хранить прямо в css-файле?

Небольшие картинки, используемые, например, в свойстве background-image, можно хранить прямо в css. Лучше всего это работает с SVG-графикой. Для того, чтобы вставить картинку в css, нам придется воспользоваться простеньким энкодером, который, к тому же, сразу же сгенерирует код для вставки в css.

Если же у вас растровая иконка и вы используете LESS, то обратите внимание на функцию data-uri, которая принимает в качестве параметра путь к файлу с картинкой, а скомпилированный css-файл уже будет содержать закодированную картинку.

Знаете ли вы, что можно совмещать CSS-variables с HSL и calc?

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

Чуть больше конкретики. Цвета в CSS можно задавать при помощи HEX-палитры (#c00), RGB-палитры (rgb(204,0,0)) и HSL-палитры (hsl(0,100%,40%)). Нас интересует сейчас именно палитра HSL. Она позволяет задавать цвет на основе трёх составляющих: Hue, Saturation и Lightness. Hue изменяет цвет от красного до фиолетового, Saturation изменяет насыщенность цвета, Lightness изменяет яркость цвета.

.theme-1 {
  --primary-h: 0;
  --primary-s: 75;
  --primary-l: 60;
}

.theme-2 {
  --primary-h: 200;
  --primary-s: 100;
  --primary-l: 65;
}

.palette {
  --primary: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 1%),
    calc(var(--primary-l) * 1%)
  );

  --primary-100: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 1.4 * 1%),
    calc(var(--primary-l) * 1.4 * 1%)
  );

  --primary-200: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 1.3 * 1%),
    calc(var(--primary-l) * 1.3 * 1%)
  );

  --primary-300: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 1.2 * 1%),
    calc(var(--primary-l) * 1.2 * 1%)
  );

  --primary-400: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 1.1 * 1%),
    calc(var(--primary-l) * 1.1 * 1%)
  );

  --primary-500: var(--primary);

  --primary-600: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 0.9 * 1%),
    calc(var(--primary-l) * 0.9 * 1%)
  );

  --primary-700: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 0.8 * 1%),
    calc(var(--primary-l) * 0.8 * 1%)
  );

  --primary-800: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 0.7 * 1%),
    calc(var(--primary-l) * 0.7 * 1%)
  );

  --primary-900: hsl(
    var(--primary-h),
    calc(var(--primary-s) * 0.6 * 1%),
    calc(var(--primary-l) * 0.6 * 1%)
  );
}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

ul li {
  display: block;
  padding: 20px;
  margin-right: 5px;
  color: white;
  text-shadow: 0 0 5px black;
}

<div class="theme-1">
  Theme 1
  <ul class="palette">
    <li style="background: var(--primary-100)">100</li>
    <li style="background: var(--primary-200)">200</li>
    <li style="background: var(--primary-300)">300</li>
    <li style="background: var(--primary-400)">400</li>
    <li style="background: var(--primary-500)">500</li>
    <li style="background: var(--primary-600)">600</li>
    <li style="background: var(--primary-700)">700</li>
    <li style="background: var(--primary-800)">800</li>
    <li style="background: var(--primary-900)">900</li>
  </ul>
</div>
<div class="theme-2">
  Theme 2
  <ul class="palette">
    <li style="background: var(--primary-100)">100</li>
    <li style="background: var(--primary-200)">200</li>
    <li style="background: var(--primary-300)">300</li>
    <li style="background: var(--primary-400)">400</li>
    <li style="background: var(--primary-500)">500</li>
    <li style="background: var(--primary-600)">600</li>
    <li style="background: var(--primary-700)">700</li>
    <li style="background: var(--primary-800)">800</li>
    <li style="background: var(--primary-900)">900</li>
  </ul>
</div>