CSS «написание» содержимого таблицы стилей?

Это не то, что я думаю, существует, но всегда было бы интересно посмотреть, возможно ли это. Мне было любопытно, могу ли я разделить таблицу стилей и назвать некоторые ее части. Например:CSS «написание» содержимого таблицы стилей?

.style { color: red; } 
.second-style { color: green; }

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

Надеюсь, теперь этот вопрос имеет больше смысла.

EDIT Еще одна причина, по которой я хочу такой вариант, также управлять условными комментариями IE, поскольку все больше и больше клиентов запрашивают совместимость с браузером.

источник

2013-07-08 Nick Bull

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

Вы говорите о разделении CSS-файла на страницу? Я немного смущен тем, что вы просите. –

Ухх, не все ли ваши css в одном листе содержат количество HTTP-запросов для твердого 1? – Rooster

Вы могли бы хотеть взглянуть на МЕНЬШЕ http://lesscss.org/

Конечно @import может помочь тоже, но МЕНЬШЕ путь более гибким, поскольку это не только поможет вам организовать ваш CSS, но также поддерживает переменные и многое другое.

Что вы можете сделать с меньшими затратами является упорядочивать стили в модули, например

typography.css 
sprites.css 
style1.css 
style2.css 
forms.css 
..etc

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

Теперь предположим, вы хотите один файл, который использует style1 и типографики ..so просто создать файл с именем меньше variant1.css, который содержит

@import "style1.css" 
@import "typography.css"

А теперь variant1.css будет содержать содержание 2 CSS файлы перечислены

..tada: модули + рекомбинация = выбор

источник

2013-07-08 21:00:17 Robert

не думаю, что это действительно то, о чем спрашивает ОП; хотя, честно говоря, я даже не уверен, что это такое. –

Можете ли вы объяснить, как это отвечает на вопрос ОФ? – Blender

Ну .. ждите, я вижу. Он сказал, что разбил файл css, чтобы использовать определенные части. Вызов класса-a или class-b для меня не имеет ничего общего с расщеплением вещей. – Robert

Если я понимаю, что вы пытаетесь достичь ... вы могли бы достичь своего рода его в CSS разделяет пространства имен, а затем изменить класс на вашем <body> elemen t:

.classname-a .style { color: red; } 

.classname-b .second-style { color: green; } 

<body class="classname-a"> 
....

Не то, чтобы я поддерживал это.

источник

2013-07-08 21:04:34

Это, пожалуй, лучший подход, и если вы используете modernizr, вы можете использовать классы, основанные на обнаружении функций и стиле соответственно. – nullability

Он не пытается использовать пространство имен. Он в основном хочет разбить 2 класса на 2 определенных файла, «без» фактически создавая 2 файла и имея возможность загружать только части файла css, чтобы сохранить пропускную способность и HTTP-запросы. Как href = style.css? Load = section1, и он возвращает только половину файла. Я знаю, не возможно, если вы не код что-то. Динамическое связывание в основном – Robert

Роберт прав, я согласен, что многое можно сделать с помощью тщательного рефакторинга CSS и тщательного использования селекторов, но об этом не так. Спасибо за ответ, хотя, а также почему вы не одобряете это? Это не очень читаемо, но, как утверждает @nullability, я вижу, что это сделано очень много - в основном с помощью Modernizr или подобных JS-файлов. Что не так с прошлой читабельностью? –

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

Я бы порекомендовал вам, чтобы у вас было 2 листа CSS на каждой веб-странице: один для макета, который является постоянным среди всех ваших веб-страниц и тем, что характерны для этой страницы. Это означает, что вы загрузите минимальный размер CSS, хотя у вас будет 2 HTTP-запроса. Если вас действительно беспокоят веб-запросы HTTP, вы всегда можете просто сбросить все это в один массивный файл, хотя я не советую этого, так как это будет PAIN, чтобы вносить какие-либо изменения или находить ненужные правила из прошлых циклов dev.

источник

2013-07-08 21:05:55 taylorc93

Если вы используете .scss-файлы как частичные, это не будет проблемой, что так когда-либо. В настоящее время у меня есть 12 файлов .scss. Никакая таблица стилей не проходит мимо складок, и это безумно легко поддерживать. сброс, переменные, глобальный, структура, тип, цвет, отдельные модули и т. д., и т. д., затем разбить все на один жесткий файл .css и BAM! У вас будет большая улыбка на вашем лице. – nouveau

@nouveau Ровно то, что я пытался объяснить ему. Я знаю, и ты знаешь, что это то, чего он хочет, он просто этого еще не знает :) .. либо это, либо динамическое связывание. Но это больше подвержено ошибкам, чем статическое связывание – Robert

Да. Я имею в виду - здорово, что @Nick_Bull - думает об этом, по крайней мере. Иногда я вспоминаю о стилях ола в голове. В этой линии мышления это будет еще меньше запросов HTTP. Однако, если ваш CSS такой огромный, вы действительно не принимаете правильный подход. У нас есть ОГРОМНЫЙ проект, и я только что проверил размер CSS после того, как мы сжали его с помощью кода. Это 72k. Он загружается только один раз. Это половина размера одного .jpg и только на .http request --- – nouveau

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

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

<!DOCTYPE html> 

<!--[if lte IE 7]><html class="bad-ie" lang="en"><![endif]--> 
<!--[if IE 8]> <html class="ie8" lang="en"><![endif]--> 
<!--[if IE 9]> <html class="ie9" lang="en"><![endif]--> 
<!--[if gt IE 9]> <html class="good-ie" lang="en"><![endif]--> 
<!--[if !IE]> --> <html class="not-ie" lang="en"><!-- <![endif]-->

И цель браузер внутри таблицы стилей:

.bad-ie body { 
    font-size: 100px; 
    color: red; 
}

источник

2013-07-08 21:25:50 Blender

CSS «написание» содержимого таблицы стилей?

ответ

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