От того, как вы подключаете стили на страницу, зависит, как быстро она отобразится, однако некоторые варианты подключения стилей могут привести к неожиданным последствиям. Разберёмся, какие у каждого способа достоинства и недостатки, и какой из них вам подойдёт.
Внешний файл со стилями
При этом подходе CSS пишется в отдельном файле с расширением .css. Такие стили ещё называют связанными.
Для связывания страницы с файлом стилей используется тег <link> внутри <head>:
<head>
<link rel="stylesheet" href="main.css">
</head>
Преимущества- Можно использовать один CSS-файл для нескольких страниц. Изменение стилей в таком файле автоматически применится ко всем страницам, к которым он подключён.
- При первой загрузке страницы файл со стилями кэшируется, и в следующие разы она открывается быстрее.
Встроенные стили
Вариант, когда CSS-свойства описываются в самом HTML-документе внутри тега <style> в шапке страницы:
<head>
<style>
h1 {
color: tomato;
}
</style>
</head>
Преимущества- Поскольку код находится непосредственно в HTML-файле, браузер не загружает сторонние файлы. Это позволяет отрисовать страницу быстрее.
- Встроенные стили работают изолированно и применяются непосредственно к странице, на которой прописаны.
Недостатки
- С каждым новым правилом вес HTML-файла будет увеличиваться и страница будет загружаться медленнее.
- Со временем такие же стили могут понадобиться на других страницах, и CSS придётся дублировать.
Инлайн-стили
В этом варианте элементам, которые необходимо оформить, добавляется атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые и применятся к элементу:
<h1 style="сolor: yellow; margin: 10px 20px">Заголовок</h1>
Преимущества- Как и со встроенными стилями, браузеру не нужно запрашивать файл, что ускоряет рендеринг.
- Не нужно писать селекторы, потому что стили применяются сразу к нужному элементу.
Однако несмотря на преимущества, инлайн-стили — это антипаттерн. Недостатков у этого подхода слишком много.
👉 @frontendInterview
