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

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

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

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

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

h1,h2 {
  color: #fff;
}

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

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

Перейти с этого source.css…

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

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

в этот target.css…

h1,h2 {
  color: #E0EAF1;
}

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

с таким кодом… (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)

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

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

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

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

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

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

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

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

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

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

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

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

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

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

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

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

NOTE: This is an experimental technology Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes. More Info here

Однако вы всегда можете использовать Syntactically Awesome Style Sheets, т.е.

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

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

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

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

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

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

Недавно добавлены переменные к официальным спецификациям 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>

К сожалению, поддержка браузеров по-прежнему оставляет желать лучшего. Согласно CanIUse, единственными браузерами, поддерживающими эту функцию сегодня (9 марта 2016 г.), являются Firefox 43+, Chrome 49+, Safari 9.1+ и iOS Safari 9.3+:

Альтернативы:

Пока переменные CSS не будут широко поддерживаться, вы можете рассмотреть возможность использования языка препроцессора CSS, такого как Меньше или Sass.

Препроцессоры CSS не просто позволят вам использовать переменные, но в значительной степени позволят вам делать все, что вы можете делать с языком программирования.

Например, в Sass вы можете создать такую ​​функцию:

@function exponent($base, $exponent) {
    $value: $base;
    @if $exponent > 1 {
        @for $i from 2 through $exponent {
            $value: $value * $base;
        }
    }
    @if $exponent < 1 {
        @for $i from 0 through -$exponent {
            $value: $value / $base;
        }
    }
    @return $value; 
}

    :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');