PassFront
  1. PassFront
  2. База знаний
  3. Основы CSS

Сравни способы подключение CSS к HTML и объясни, когда выбирать каждый вариант.

Основы CSS

CSS подключают к HTML тремя способами: внешним файлом, блоком `<style>` и атрибутом `style`.

Внешний файл — основной способ

<link rel="stylesheet" href="/styles/main.css" />

Кешируется браузером, переиспользуется на всех страницах, легко поддерживать.

Блок style

<style>
  .hero { min-height: 60vh; }
</style>

Подходит для критического CSS первого экрана (чтобы не ждать загрузки файла) и для одностраничных демо.

Атрибут style

<div style="--progress: 40%"></div>

Самая высокая специфичность, не кешируется и не переиспользуется. Уместен для динамических значений, лучше через CSS-переменные.

@import

Импорт из другого CSS-файла — грузится последовательно, на практике заменяется <link> или сборкой.

Коротко для собеседования

Обычно — внешний файл через <link>; <style> для критического CSS, style только для динамических значений.

Подробнее: MDN — Как подключить CSS

Другие вопросы раздела