Стартові CSS налаштування веб-проєкту

Обов’язково глобально встановіть box-sizing: border-box; для всіх елементів та псевдокласів. Це налаштування змусить браузер враховувати border та padding під час визначення розміру елементів, що спростить роботу та не вплине на зовнішні компоненти, оскільки значення за замовчуванням нині майже не використовуються.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Далі варто встановити розміри body та прибрати відступи за замовчуванням.

margin та padding можуть відрізнятися в різних браузерах, тому краще одразу встановити їх значення на нуль. height: 100dvh; - динамічна висота, що враховує панелі мобільних браузерів. width: 100%; - потрібна у відсотках, бо vw може порушити шаблон при появі вертикального скролу. Ширину та висоту важливо налаштувати для коректного розташування абсолютних елементів.

body {
  margin: 0;
  padding: 0;
  height: 100dvh;
  width: 100%;
}

Якщо фреймворк не встановив це за замовчуванням, переконайтесь, що у вас додано HTML мета-тег для налаштування ширини viewport.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Якщо використовуєте Nuxt, встановіть також розміри для блоку за замовчуванням:

#__nuxt {
  height: 100%;
  width: 100%;
}

Рекомендую також прибрати відступи та стилі для списків, оскільки у більшості випадків вони не потрібні.

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

Також зніміть стилі з посилань, адже їх часто доводиться редагувати.

a {
  text-decoration: none;
  color: inherit;
}

Обережно можна прибрати outline за замовчуванням. Це має сенс, оскільки він може відрізнятися у різних браузерах. Проте для доступності сайту це важливо, тому забезпечте відповідну заміну:

*:focus {
  outline: none;
}

CSS Debug

Часто виникають ситуації, коли дизайн ламається або з'являються скроллбари, і важко знайти причину. У таких випадках допомагає ось така CSS властивість (раджу залишити її закоментованою в коді):

*,
*::before,
*::after {
  background: rgb(0 100 0 / 0.1);
}

Властивість overflow-x: clip також може вирішити чимало проблем. Рекомендую використовувати її на body або wrapper.

Media Mixin

Щоб не запам’ятовувати розміри дисплеїв, можна створити SCSS міксини.

$max-width-tablet: 1024px;
$max-width-mobile: 768px;

@mixin desktop {
  @media only screen and (min-width: $max-width-tablet + 1) {
    @content;
  }
}

@mixin tablet {
  @media only screen and (min-width: $max-width-mobile + 1) and (max-width: $max-width-tablet) {
    @content;
  }
}

@mixin mobile {
  @media only screen and (max-width: $max-width-mobile) {
    @content;
  }
}

Не варто створювати сотні розмірів! Зазвичай вистачає трьох. CSS також є кодом, його потрібно підтримувати, тому описуйте лише необхідні властивості.

@use "mixins/media";

@include media.desktop {
  padding: 0;
}

CSS властивості. Темна/Світла теми

Особиста порада: зберігайте всі CSS властивості проєкту в змінних CSS.

Не використовуйте SCSS/LESS змінні, а саме змінні CSS на рівні :root.

:root {
  --font-size: 10px;
  --font-size-small: 14px;
  --font-size-header-nav: 25px;

  --color-text: #dcddde;
  --color-text-secondary: #dcddde;
  --color-primary: #ae0000;

  --color-background: #171717;
  --color-background-secondary: #222;

  --color-scroll: #6c6c6c;
  --color-border: #6c6c6c;

  --indent-base: 1rem;

  --z-index-backdrop: 100;
  --z-index-global: 99999;

  --border-base: 1px solid var(--color-border);

  &.light {
    --color-background: #fff;
    --color-text: #333;
  }
}

Це дозволить утримувати проєкт в єдиному дизайні, швидко змінювати стиль та дозволить спільноті легко створювати власні варіанти дизайну сайту, наприклад через Chrome Extensions.

Декілька порад щодо CSS властивостей:

• Назва починається з назви CSS властивості. Це покращує навігацію для розробників.
• Друга частина назви обов'язково абстрактна. Уникайте color-blue, щоб легко змінювати дизайн.
• При світлій/темній темі, встановлюйте темну тему першою – це збереже зір користувачам.
• Не можна використовувати у media-запитах як атрибут.
• Шрифт на HTML встановлюйте у пікселях, інше — у rem.
• Відступи, пов’язані з текстом (на полях введення, заголовках тощо), робіть окремими властивостями у rem для легшого редизайну.