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

Question

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

(Например, набор различных селекторов, которые должны применять один и тот же цвет или один и тот же размер шрифта)?

Answer 1

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

Answer 2

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

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

А потом в контентной части где-то:

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

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

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

Answer 3

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

h1,h2 {
  color: #fff;
}

Answer 4

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

p{
  background-color: #ccc; 
}

h1{
  background-color: #ccc;
}

Здесь вы можете инициализировать глобальную переменную в : корневой селектор псевдокласса. : 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;
}

Answer 5

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

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

Перейти из этого источника. Css & hellip;

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

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

к этой цели. 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)

Answer 9

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

Answer 10

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

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