Как избежать повторяющихся констант в CSS

StackOverflow https://stackoverflow.com/questions/30170

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

enter image description here

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

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

Препроцессоры 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; 
}

Другие советы

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

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

И затем где-то в части контента: 

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

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

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

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

h1,h2 {
  color: #fff;
}

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

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);
}

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

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

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

$base : #ccc;

p{
  background-color: $base;
}

h1{
   background-color: $base;
}

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

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

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

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

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

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

Насколько я знаю, без программного создания файла 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)

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

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

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

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

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

    :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');
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top