Отдельные файлы CSS для разных веб-страниц?

Question

Я создаю свой первый веб-сайт и нуждаюсь в небольшой помощи. Я использую bootstrap и уже сделал целевую страницу. При создании моей следующей веб-страницы я столкнулся с небольшой дилеммой.

Я использую один и тот же CSS-файл для стилизации обеих страниц?

и если да, то, что если у меня есть (просто пример) что-то вроде

.intro-header { background-image: url(whatever); } 

и у меня также есть интро-заголовок на второй веб-страницы, которую я хочу иметь различный фон с различными CSS стили. Как я могу получить CSS, чтобы отличить два?

Answer 1

Я бы использовал тот же файл CSS, что и базовый, чтобы обеспечить непрерывность на всем сайте. Однако, если вам нужно стилизовать отдельные страницы по-разному от базового стиля, вы можете либо добавить еще один файл CSS ИЛИ добавить его в исходный файл CSS. Помните, что чем больше у вас CSS-файлов, тем больше файлов CSS, которые у вас есть, до поддерживают в конечном итоге. Я бы предложил второй вариант.

для вашего конкретного примера на вашей целевой странице вы можете иметь header тега, который выглядит следующим образом:

<header class="site-header" id="landing-page-header">This is my landing page header</header> 

и последующего CSS

.site-header { 
/*YOUR SHARED HEADER CSS TO BE USED BY THE HEADER ON EACH PAGE HERE*/ 
} 

#landing-page-header { 
/*SPECIFIC CSS FOR THE HEADER ON THE LANDING PAGE (e.g. BACKGROUND IMAGE)*/ 
} 

Тогда для страницы без посадки вы можете иметь :

<header class="site-header" id="another-page-header">This is another page header</header> 

и последующего CSS

#another-page-header { 
/*SPECIFIC CSS FOR THE HEADER ON THE OTHER PAGE (e.g. BACKGROUND IMAGE). 
NOTE: SINCE THIS IS INCLUDED IN THE SAME CSS FILE SHARED BY THE ENTIRE SITE THE 
CSS IS ALREADY DEFINED FOR THE CLASS "site-header".*/ 
} 

Answer 2

Я бы предложил один файл css для вашего сайта. Если у вас есть что-то на отдельной странице, которая использует другой стиль, вы должны ее соответствующим образом определить (например, новый стиль, идентификатор или класс). Причина этого заключается в том, что CSS должен управлять вашим стилем EASY. Например, если вы хотите изменить цветовую схему своего сайта, вы должны иметь возможность редактировать свой файл CSS и отражать изменения на всем сайте. Управлять этим с помощью другого CSS-файла для каждой страницы было бы невероятно сложно.

Это, как говорится, есть преимущества для использования нескольких файлов CSS для данного веб-сайта. Например, если вы используете bootstrap, я бы применил CSS Bootstrap по умолчанию, а затем использовал свой собственный CSS-файл, чтобы переопределить его везде, где вы хотите внести изменения. Таким образом, вам не нужно редактировать файл MASSIVE Bootstrap CSS.

Answer 3

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

Если вам требуется другое фоновое изображение для .intro-header, одно из них заключается в использовании другого класса или просто использовании разных квалификаторов, например, путем добавления идентификатора на теле.

#page1 .intro-header { background-image: url(whatever); } 
#page2 .intro-header { background-image: url(anotehrimage); } 

Answer 4

Я собираюсь не согласиться со всеми остальными. Я не думаю, что у вас должна быть монолитная таблица стилей, которая охватывает всевозможные стили, которые вы используете на своем сайте. Несмотря на то, что существует только один HTTP-запрос, который кэшируется для будущих ответов, каждая страница должна обрабатывать таблицу стилей и определять, какие стили применяются к ней.

Если у меня есть более чем несколько специализированных стилей, я стараюсь создавать таблицу стилей с моими глобальными стилями (стили, используемые на большинстве страниц), тогда я создаю специализированную таблицу стилей для отдельных страниц или определяю стиль непосредственно в голове (обратите внимание, что некоторые системы CMS не дают вам такой гибкости).