Правильный способ использования нескольких таблиц стилей ... так что РАБОТАЕТ?

Question

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

Answer 1

Я предлагаю следующее соглашение:

1. Создание различных файлов в зависимости от их назначения.например.(reset.css, base.css, typography.css, form.css, ie-specific.css [для специфических для IE материалов], print.css)

2. Создать процесс ANT (если вы используете Java) или что-нибудь эквивалентное.например.в apache вы можете сделать что-то вроде добавления ссылки с помощью href = "application.css", и ваш .htaccess должен перенаправить запрос для application.css на что-то вроде getAllCSS.php, и для этого требуются все перечисленные выше CSS-файлы.

3. Так что теперь ваш браузер делает только один запрос (т. Е. Application.css), и вы все равно получаете все файлы CSS.

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

И если у вас есть все эти основные стили, определенные заранее, вам не придется переопределять стили для каждого элемента.

Надеюсь, это имеет смысл.

Пожалуйста, поправьте меня, если я ошибаюсь.

Answer 2

Возможно, не связано, но иногда веб-сайт ASP.NET будет кэшировать ваши CSS-файлы на сервере.

Вы можете исправить это, нажав? Version = 1 до конца ваших стилевых ссылок. Пример:

<link rel="stylesheet" type="text/css" href="css/structure.css?version=1" />

Если они снова будут кэшированы, просто увеличьте номер версии, и это заставит сервер перезагрузить его.

Answer 3

Сначала. Я бы рекомендовал против такого разделения, поскольку с точки зрения оптимизации это добавляет дополнительные запросы ко времени загрузки

Однако, чтобы ответить на ваш вопрос, сначала переключите их, чтобы загрузить структуру, затем цвет, а затем введите.

Answer 4

Один из простых способов понять это - использовать надстройку Firebug для Firefox. Проверьте, к какому элементу, как вы знаете, применены стили типов, и он покажет вам, что применяется к этому конкретному элементу.