Какой из следующих способов лучше использовать внешнюю таблицу стилей?

Question

я сталкивался с двумя типами использования внешней таблицы стилей одним способом

<link href="CSS/div1.css" rel="stylesheet" type="text/css" />
<link href="CSS/div2.css" rel="stylesheet" type="text/css" />
<link href="CSS/div3.css" rel="stylesheet" type="text/css" />

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

<link href="CSS/div1.css" rel="stylesheet" type="text/css" /> and inside this
@import url('../CSS/div2.css');
@import url('../CSS/div3.css');
.crazy
{
 display:block;
 background-color:Black;
 color:White;
}

Я где-то читал, что второй подход лучше, поэтому я создал демо и проверил, что в firebug в первом случае он занимает 16 мс, а также загружен меньше байтов данных, но во втором подходе он занимает 109 мс и загружен больше байт. данных, так что я запутался, какой подход лучше.

Answer 1

первый - рекомендуемый, потому что браузер быстрее отображает их Подробнее на сайте Стива

Answer 2

Исторически, @import использовался, потому что он не поддерживался более старыми версиями IE и Netscape, что позволяло легко скрывать более продвинутый CSS от этих браузеров. В настоящее время это не является большой проблемой, и другие методы рекомендуются, когда вам нужно ориентироваться на определенные браузеры с помощью CSS.

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

Answer 3

Иди с первым! Результаты вашего теста довольно ясны!

Answer 4

Я всегда иду первым, как показывает W3C

http://www.w3schools.com/css/css_howto.asp