Избегание повторяющихся констант в CSS

Ответ 1

Элементы могут принадлежать более чем одному классу, поэтому вы можете сделать что-то вроде этого:

.DefaultBackColor
{
    background-color: #123456;
}
.SomeOtherStyle
{
    //other stuff here
}
.DefaultForeColor
{
    color:#654321;
}

А затем в части содержимого где-нибудь:

<div class="DefaultBackColor SomeOtherStyle DefaultForeColor">Your content</div>

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

Но, да, моя самая большая жалоба на CSS - это невозможность определить ваши собственные константы.

Ответ 2

Вы должны запятой отдельно отделить каждый идентификатор или класс:

h1,h2 {
  color: #fff;
}

Ответ 3

В последнее время переменные были добавлены в официальные спецификации CSS.

Переменные позволяют вам сделать что-то вроде этого:

body, html {
    margin: 0;
    height: 100%;
}

.theme-default {
    --page-background-color: #cec;
    --page-color: #333;
    --button-border-width: 1px;
    --button-border-color: #333;
    --button-background-color: #f55;
    --button-color: #fff;
    --gutter-width: 1em;
    float: left;
    height: 100%;
    width: 100%;
    background-color: var(--page-background-color);
    color: var(--page-color);
}

button {
    background-color: var(--button-background-color);
    color: var(--button-color);
    border-color: var(--button-border-color);
    border-width: var(--button-border-width);
}

.pad-box {
    padding: var(--gutter-width);
}

<div class="theme-default">
    <div class="pad-box">
        <p>
            This is a test
        </p>
        <button>
           Themed button
        </button>
    </div>
</div>

Ответ 4

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

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Здесь вы можете инициализировать глобальную переменную в: селекторе псевдо-класса root.: root - это верхний уровень DOM.

:root{
    --main--color: #ccc; 
}

p{
  background-color: var(--main-color);
}

h1{
  background-color: var(--main-color);
}

ПРИМЕЧАНИЕ. Это экспериментальная технология Поскольку эта спецификация технологии не стабилизировалась, проверьте таблицу совместимости для правильных префиксов для использования в разных браузерах. Также обратите внимание, что синтаксис и поведение экспериментальной технологии могут изменяться в будущих версиях браузеров по мере изменения спецификации. Подробнее здесь

Однако вы всегда можете использовать Синтаксически Удивительные таблицы стилей, т.е.

В случае Sass вам нужно использовать $variable_name сверху для инициализации глобальной переменной.

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

Ответ 5

Вы можете использовать динамические фреймворки css, такие как less.

Ответ 6

Насколько я знаю, без программного создания файла CSS, нет способа, скажем, определить ваш любимый оттенок синего (# E0EAF1) в одном и только одном месте.

Вы можете довольно легко написать компьютерную программу для создания файла. Выполните простую операцию поиска и замены, а затем сохраните ее как .css файл.

Перейдите из этого source.css & hellip;

h1,h2 {
  color: %%YOURFAVORITECOLOR%%;
}

div.something {
  border-color: %%YOURFAVORITECOLOR%%;
}

для этого target.css & hellip;

h1,h2 {
  color: #E0EAF1;
}

div.something {
  border-color: #E0EAF1;
}

с кодом, подобным этому & hellip; (VB.NET)

Dim CssText As String = System.IO.File.ReadAllText("C:\source.css")
CssText = CssText.Replace("%%YOURFAVORITECOLOR%%", "#E0EAF1")
System.IO.File.WriteAllText("C:\target.css", CssText)

Ответ 7

Лично я просто использую селектор с запятой, но есть некоторое решение для написания css программно. Возможно, это немного переполняет для вас более простые потребности, но взгляните на CleverCSS (Python)

Ответ 8

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

h1 {
  color: red;
}
p {
  font-weight: bold;
}

Или вы можете создавать разные классы

.deflt-color {
  color: green;
}
.dflt-nrml-font {
  font-size: 12px;
}
.dflt-header-font {
  font-size: 18px;
}

Ответ 9

Вы можете использовать множественное наследование в своих элементах html (например, <div class="one two">), но я не знаю, как иметь константы в самих файлах CSS.

Эта ссылка (первая найденная при поиске по вашему вопросу), похоже, имеет довольно глубокий взгляд на проблему:

http://icant.co.uk/articles/cssconstants/

Ответ 10

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

До тех пор вам придется либо копировать, и вставлять, либо использовать препроцессор любого типа, как это предполагали другие (обычно с использованием сценариев на сервере).

Ответ 11

    :root {
      --primary-color: red;
    }

    p {
      color: var(--primary-color);
    } 

<p> some red text </p>

Вы можете изменить цвет с помощью JS

var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim(); 


document.documentElement.style.setProperty('--primary-color', 'blue');