Применение одного правила CSS к другому

@Xero201 · Регистрация: 27.12.2008

Студворк — интернет-сервис помощи студентам

CSS правила для страницы состоят из двух частей:

(A) общие - характерные для всех страниц
(B) специальные - присущие только конкретной странице.

Хочется сделать так, чтобы при описании правил B, можно было использовать некоторые правила из A.

Например, в A описан цвет:

CSS
1
.super_color{ color:#123; }

у В есть элементы, для которых нужно тоже применять этот цвет:

CSS
1
.spec{ color:#123; }

Можно ли описать это правило как-нибудь так:

CSS
1
.spec{@import(.super_color);};

PS.
Только не надо, пожалуйста, предлагать

CSS
1
.super_color, .spec{ color:#123; }

@vasvas7775 · 26.03.2011, 12:41

Задать блоку и id и clacc. Через class характеристики, которые везде одинаковые, через id разные.

Vovan-VE · 26.03.2011, 12:58

Сообщение от Xero201

.spec{@import(.super_color);};

Ничего подобного в CSS не предусмотрено.

@Xero201 · 26.03.2011, 13:33 **[ТС]**

vasvas7775

Задать блоку и id и clacc. Через class характеристики, которые везде одинаковые, через id разные.

Какому блоку и где задать?

Еще раз. Сайт оформлен в трех цветах (CSS A)

CSS
1
2
3
.color1 { color:#111; }
.color2 { color:#111; }
.color3 { color:#111; }

На некоторых страницах есть уникальные элементы, который описываются отдельными правилами (CSS В). Но цвет, нужно брать из основного правила CSS A.
И не хочется делать:

HTML5
1
2
3
4
<p class="spec color1">текст</p>
<p class="spec color1">текст</p>
...
<p class="spec color1">текст</p>

А хочется:

HTML5
1
2
3
4
<p class="spec">текст</p>
<p class="spec">текст</p>
...
<p class="spec">текст</p>

+ CSS, где указывается что spec должен быть цвета color1

Vovan-VE:

Ничего подобного в CSS не предусмотрено.

Точно знаешь? Как тогда быть не подскажешь?

Vovan-VE · 26.03.2011, 13:48

Сообщение от Xero201

Точно знаешь? Как тогда быть не подскажешь?

Точно. А почему такая острая необходимость именно так, а не как-то иначе (вроде того же .super_color, .spec {})? Наверняка, можно по-другому сделать.

@Xero201 · 26.03.2011, 14:03 **[ТС]**

Сообщение от Vovan-VE

Точно. А почему такая острая необходимость именно так, а не как-то иначе (вроде того же .super_color, .spec {})? Наверняка, можно по-другому сделать.

Ну вот:

не хочется главный стиль забивать кучей специфичных только для отдельных страниц правил. Например будет в результате
CSS
1
.super_color, .spec, #la-la-la .xo-xo-xo, .uniq a, #content .quest a ...... {}
Когда нужно добавить новую страниц, нужно будет все время открывать главный CSS и добавлять. Если страницу удалить, то в главном будет мусор копиться.
Размер главного CSS возрастает. Конечно все равно, будет он весить 12Кб или 12.1Кб, но хочется же чтобы 12)) (+ сама мысль о том, что там все-таки может быть мусор - приводит в уныние)
Если например, мне дизайнер скажет поменять у конкретного тега color1 на color2, то можно открыть CSS именно этой странице и быстро найти там нужные строчки (без ctrl+F поиска).
Да и при разработке удобнее - каждый оформляет свою страницу, не трогая главный CSS. Можно заливать в интернет без страха удалить чужие изменения.

Vovan-VE · 26.03.2011, 14:31

В целом проблема понятна. Я бы, пожалуй, сделал так, чтобы в страницах использовались именно классы из главного css, который один на всех (например, .spec). Если нужно у конкретной страницу его перекрыть, то в ее css'е более точным правилом можно без проблем перекрыть глобальное так, что изменение коснется только этой страницы. Например, так:

CSS
1
body.the-page .spec {color:#f00;}

@Xero201 · 26.03.2011, 14:48 **[ТС]**

1.
вот например, есть правило, что заголовки h1 должны отображаться цветом color1. На одной странице нужно, чтобы это был color2 (именно тот color2, который в главном CSS). Если делать копипаст значения из главной CSS, а потом изменить color2 (он оказался плохим решением), нужно будет везде этот копипаст исправлять. А если предлагать пользователю на выбор несколько главных CSS (разные стили), то вообще дизайн полетит.

2.
Если элемент <div class="spec"></div> есть только на одной странице, а на других его нет, но цвета у него должны быть взяты из главной?

Vovan-VE · 26.03.2011, 15:05

Насчет п.1 могу только посоветовать полностью свою философию пересматривать. Ведь если сказано, что:

Сообщение от Xero201

На одной странице нужно, чтобы это был color2 (именно тот color2, который в главном CSS).

то это значит, что именно в главном css оно и должно быть прописано, например, в виде h1.default {} (или как-то еще по вкусу). Этим я хочу сказать, что надо сначала задуматься, чтО первично, а чтО вторично. Раз уж Вы говорите, что собственному css'у страницы нужно брать инфу из главного css'а, я так понял, сейчас у Вас первичен собственный css у каждой страницы, а главный css вторичен. Имхо, нужно как раз наоборот, чтобы главный css был первичен, а собственный css у каждой страницы был вторичен (чтобы перекрывал собой только нужные вещи).

С приоритетами селекторов Вы наверняка знакомы, так что помочь Вам можете только Вы сами.

@Xero201 · 26.03.2011, 17:18 **[ТС]**

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

Code
1
2
3
4
5
rule{
use(.name_class);
use(#name_id);
use(name_tag);
}

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

Vovan-VE · 26.03.2011, 17:26

Сообщение от Xero201

все эти блоки попадаются только на конкретных страницах. Зачем их описывать в главном правиле?
Единственное что нужно - брать от туда для них цвет.

Так и добавьте им к своим собственным класса еще класс из главного CSS'ника, где общий цвет указан.

HTML5
1
<div class="foo super_color"></div>

HTML5
1
<div id="bar" class="super_color"></div>

И пусть цвет оттуда и берется, из .super_color'а.

@Xero201 · 26.03.2011, 17:49 **[ТС]**

См. пост 4.
На странице Х, все элементы spec1 должны иметь цвет color1
Пишем:

HTML5
1
2
3
4
5
<div class="spec1 color1"></div>
.........
<p class="spec1 color1"></div>
..............
<a class="spec1 color1"></div>

но такой class="" уже равносилен style="", со всеми негативными последствиями. Потому что, если нужно будет поменять color1 на color2 нужно будет ходить, и менять во всех class="".
Не говоря уже о том, что это скучно вместо class="spec1" писать class="spec1 color1 font-size1 font-famaly1...."

Vovan-VE · 26.03.2011, 17:56

Не по теме:

Xero201, С этим не поспоришь. За такие классы верстальщику сразу надо руки отрывать. :D

@Alorian · 27.03.2011, 01:02

Сообщение от Xero201

Но если есть десять страниц, на одной есть блок "бумбрик", на другой "вумбирк", на третьей "гумбрик" и т.д., все эти блоки попадаются только на конкретных страницах. Зачем их описывать в главном правиле?
Единственное что нужно - брать от туда для них цвет.

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

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

На текущий момент в чистом css нельзя использовать переменные. В css3 возможно появятся переменные(ссылка), но на текущий момент чистый css переменные не поддерживает.

Если очень нужно менять цвет именно в одном месте для всех страниц, то генерируй css файл со всеми правилами динамически, например вот так:

CSS
1
2
<?$color = "#FF0000"?>
.style1{color:<?echo $color?>;}

расширение у такого файла должно быть styles.php

Итого:
1. У блоков много общего, но различается только одно правило? Напиши все общее в главном css отличное правило вынеси в css конкретной страницы.

2. У блоков все разное, но есть одно общее правило? Просто опиши все правила в css конкретной страницы, плевать что одно правило совпадает у всех.

Vovan-VE · 27.03.2011, 06:03

Сообщение от Alorian

то генерируй css файл со всеми правилами динамически

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

@Xero201 · 27.03.2011, 11:37 **[ТС]**

Alorian большое спасибо за ссылку. Переменные - то что нужно! Но, тысяча чертей, как жаль что это еще только в разработке + люди настоящие мазохисты, когда они браузеры обновят - не ясно.
Вообще чистого css уже давно нет (это я в книжке прочитал), и это здорово, потому что одного каскадного описания - мало. "Даешь css-программирование!")

Верстка это разовая работа.

В моем случае - верстка - это бесконечно долгая работа) Копипаст ненавижу до жути, потому что вечно чего-то сделаю не так, а замечаю - когда уже поздно. От "Найти-Заменить" уже тошнит.

Не по теме:

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

Поэтому крайне беспокоит любое действие, которое потенциально может обречь меня на эту муку.

Одно общее css правило можно найти практически у любых никак не связанных между собой элементов на странице, но это не повод выносить одно это единственное правило в какую внешнюю переменную

Согласен на 100%. Объединять разные по логике блоки - извращение). Но переменные позволят пользоваться определенным набором значений (не дожидаясь, пока эти значения станут идеальными).
А еще, менять стиль, можно будет изменив только цвета, и фон элементов. Для этого надо будет поменять всего лишь один CSS, состоящий из минимального набора таких правил, что очень экономно для соц.сетей где пользователь оформляет свои странички. Конечно, таким образом нельзя в корне изменить стиль, но все равно достаточно эффектно.

Главный минус при таком подходе - увеличение времени загрузки страницы,

У пхп-вставок дофига минусов. В том числе плохая совместимость с верстальщиками, отсусутствие авто-заполнения в редакторах, необходимость виртуального сервера вместо html-макета (либо работа в интернете). Непереносимость правил в обычные css (т.к. <?php> вырубит все правило, и нужно его чистить каждый раз)...

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK сделайте это, JDK, то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера . . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	26.03.2011, 12:41
	Задать блоку и id и clacc. Через class характеристики, которые везде одинаковые, через id разные. 0

@Xero201 68 / 66 / 19 Регистрация: 27.12.2008 Сообщений: 212
	26.03.2011, 14:48 [ТС]
	1. вот например, есть правило, что заголовки h1 должны отображаться цветом color1. На одной странице нужно, чтобы это был color2 (именно тот color2, который в главном CSS). Если делать копипаст значения из главной CSS, а потом изменить color2 (он оказался плохим решением), нужно будет везде этот копипаст исправлять. А если предлагать пользователю на выбор несколько главных CSS (разные стили), то вообще дизайн полетит. 2. Если элемент <div class="spec"></div> есть только на одной странице, а на других его нет, но цвета у него должны быть взяты из главной? 0

Vovan-VE
	26.03.2011, 17:56
	Не по теме: Xero201, С этим не поспоришь. За такие классы верстальщику сразу надо руки отрывать. :D 0