Почему главная страница Notion сохраняет стиль css внутри HTML div

Question

Принято считать, что сохранять стиль css внутри div для большого проекта - плохая практика. Следует хранить отдельный файл CSS.

Однако я наткнулся на домашнюю страницу Notion , это красивый сайт с хорошей производительностью. Просматривая веб-страницу, я вижу много строк, например:

<div class="notion-app-inner notion-light-theme" style="
color: rgb(55, 53, 47); 
fill: currentcolor; 
line-height: 1.5; 
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 
-webkit-font-smoothing: auto;"> 

Мой вопрос в том, почему сайт сохраняет стиль css внутри div вместо отдельного файла css? (или это результат некоторой практики реагирования?) Какова причина этого?

Я понимаю, почему в целом рекомендуется хранить css в отдельном файле. Я хотел бы знать, почему Notion использует противоположную практику? Инженеры, стоящие за сайтом, четко знают, что делают.

Answer 1

Это может быть компонент или элемент, созданный функцией. Они вызывают функцию для создания тега div со всеми стилями. Они, вероятно, не смотрят на создание файла html, только на DOM и функциональность, поскольку он создается файлом javascript в бэкэнде. Возможно, этот код был изначально скопирован и встроен на веб-страницу / блог и т. Д. c .. Без встроенного стиля объект встроенного кода выглядел бы неуклюжим и неудобным (возможно, слишком большим). Помните, что встроенные стили переопределяют стили файлов. css, если только! Important не используется в стилях файла. css. Надеюсь, это поможет :)

Answer 2

Обычно вы хотите сохранить css в отдельной таблице стилей, так как ее намного проще поддерживать. Просмотр файла HTML для изменения стиля страницы просто недостаточно эффективен. 1008 * элемент займет гораздо больше времени.

Answer 3

создать файл style. css, как показано ниже, и импортировать его

, как показано ниже, на страницу html в разделе заголовка;

html строка импорта страницы:

<link rel="stylesheet" type="text/css" href="style.css"> 

стиль. css:

.notion-app-inner notion-light-theme {
    color: rgb(55, 53, 47); 
    fill: currentcolor; 
    line-height: 1.5; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 
    -webkit-font-smoothing: auto;
}

Answer 4

Подумать только: у вас больше 5 карточных предметов на разных страницах и все такое. Если вы добавляете CSS ко всем элементам div, у вас будет много повторяющегося кода на каждой странице. Если вы собираетесь обновить дизайн карты, вам нужно будет отредактировать каждую из них вручную, что не является хорошей идеей. Вот почему вам следует использовать отдельный файл CSS, чтобы упростить управление кодом.

Answer 5

Чтобы стилизовать файл html, вам потребуется css. Итак, вы можете создать отдельный файл css и затем связать его с файлом html в теге ссылки. Например,

. поместите этот тег между тегами заголовка. Таким образом, вы можете применить стиль css к любому файлу html.