Каковы преимущества и недостатки использования больших файлов CSS?

Скажем, я создаю 100 селекторов внутри style.css со следующей схемой:Каковы преимущества и недостатки использования больших файлов CSS?

.width-1 {width: 1%;} 
.width-2 {width: 2%;} 
/* up to... */ 
.width-100 {width: 100%;}

делает также то же самое с высотой, таблицами цветов и включает в себя много других стилей. Конечным результатом может быть файл css, содержащий около 5000 селекторов и размер 300 КБ.

Вопрос: Зачем мне это делать или не следует? Слишком много селекторов вызовут проблемы с производительностью?

Плюсы:

Один большой CSS файл требует только один запрос HTTP,
я могу загрузить множество функций CSS для каждого сайта, только в том случае,

Минусы:

Очевидно - большой размер файла css,
IE 8-9 может содержать только 4095 селекторов max в одном файле css,
Существует риск загрузки слишком большого количества стилей, которые не будут использоваться в текущем представлении.

Я заинтересован в ориентации Android 2.3+ и IE8 +

источник

2015-02-11 Dariusz Sikorski

преуменьшать CSS-и добавить сжатие GZIP для текста/css mimetype –

Если вы хотите сделать селектор только для каждого процентного значения от 1 до 100%, вы можете просто использовать встроенный стиль, в котором он вам нужен. Если у вас есть предопределенная ширина, которую вы хотите использовать (например, 12,5 %, 25%, 37,5% и т. Д.), Затем создайте несколько классов. – ElGavilan

, если вы нацеливаете Android, у вас не должно быть этого большого файла css, не беспокойтесь об IE, вы даже не приблизитесь к 4095 –

один большой файл, что не так уж плохо. Вот почему мы минимизируем/объединяем наши материалы в отдельные файлы. Проблема заключается в том, что вы используете это много полезных классов, и многие из них не будут использоваться. Каждый селектор заставит браузер искать все элементы этого класса. Так что это много (бесполезная) проверка, чтобы увидеть, есть ли что-то там.

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

Так что я бы не сказал, что размер файла плохой, это более экстремальная медлительность и бесполезность селекторов, которые вы показываете.

источник

2015-02-11 13:34:09 donnywals

В конце дня sass файлы скомпилированы в css, который использует такое же количество селекторов, что и чистый Css-файл. –

Нет, миксины добавили бы только размер вашего файла, если вы его используете. Мое предложение состоит в том, чтобы не добавлять все эти классы в файл css, потому что они не имеют никакого смысла. Вместо этого mixin будет выводить ширину в%, если необходимо. Так что это меньше селекторов в вашем CSS, потому что стиль более полезный селектор – donnywals

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

Чтобы ответить на ваш вопрос: с использованием большого CSS-файла может иметь большие проблемы с производительностью. , используя множество файлов CSS, также не может быть вариантом. iOS поддерживает только ограниченное количество включенных CSS-файлов на один документ. (Я не могу найти ссылку

Вывод:.. Не делать, как все остальные, и определить стиль для определенного класса, как CSS и должен быть

источник

2015-02-11 13:47:42 Hacky

Каковы преимущества и недостатки использования больших файлов CSS?

ответ

Смежные вопросы