CSS организация и цвета - PullRequest
Новая
       23

CSS организация и цвета

4 голосов
/ 19 сентября 2008

Я только что закончил веб-сайт среднего размера, и одна вещь, которую я заметил в своей организации CSS, это то, что у меня много жестко закодированных значений цвета повсюду. Это явно не очень хорошо для удобства обслуживания. Обычно при разработке сайта я выбираю 3-5 основных цветов для темы. Я заканчиваю тем, что устанавливаю некоторые значения по умолчанию для абзацев, ссылок и т. Д. В начале моего основного CSS, но некоторые компоненты меняют цвет (например, тег легенда) и требуют, чтобы я изменил цвет на нужный мне. Как вы этого избегаете? Я думал о создании отдельных правил для каждого цвета и просто использовал их, когда мне нужно изменить стиль.

т.е. 

.color1 {
    color: #3d444d;
}

Ответы [ 12 ]

3 голосов
/ 19 сентября 2008

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

h1 { 
 padding...
 margin...
 font-family...
}

p {
 ...
}

code {
 ...
}

/* time passes */

/* these elements are semantically grouped by color in the design */
h1, p, code { 
 color: #ff0000;
}

При предварительном просмотре предложение JeeBee является логическим продолжением этого: если имеет смысл обрабатывать ваши цветовые объявления (и, конечно, это может применяться к другим проблемам стиля, хотя цвет обладает уникальными свойствами неизменности макета) Вы могли бы рассмотреть вопрос о том, чтобы вытолкнуть его в отдельный файл CSS, да. Это также упрощает возможность горячей замены цветовых тематических вариантов, просто нацелив их на тот или иной профиль colorxxx.css.

2 голосов
/ 19 сентября 2008

Это именно то, что вы должны сделать.

Чем более централизованно вы можете сделать свой CSS, тем легче будет внести изменения в будущем. И давайте будем серьезными, вы захотите изменить цвета в будущем.

Вы почти никогда не должны жестко кодировать любой CSS в свой HTML, он должен all быть в CSS.

Кроме того, то, что я начал делать чаще, - это накладывать ваши классы CSS друг на друга, чтобы было еще проще изменить цвета, когда ... представьте везде.

Образец (случайный цвет) css: 

.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}

Затем какая-то разметка, обратите внимание, как я использую слой цветов с другими классами, так что я могу просто изменить ОДИН класс css: 

<body class='main_text'>
  <div class='main_color secondary_text'>
    <span class='secondary color main_text'>bla bla bla</span>
  </div>
  <div class='main_color secondary_text>
    You get the idea...
  </div>
</body>

Помните ... встроенный css = плохо (большую часть времени)

1 голос
/ 19 сентября 2008

Я иногда использую PHP и делаю файл что-то вроде style.css.php. Тогда вы можете сделать это: 

<?php 
    header("Content-Type: text/css");
    $colour1 = '#ff9'; 
?>
.username {color: <?=$colour1;?>; }

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

1 голос
/ 19 сентября 2008

Возможно вытащить всю информацию о цвете в одну часть вашей таблицы стилей. Например, измените это: 

p .frog tr.mango {
    color: blue;
    margin: 1px 3em 2.5em 4px;
    position: static;
}
#eta .beta span.pi {
    background: green;
    color: red;
    font-size: small;
    float: left;
}
// ...

к этому: 

p .frog tr.mango {
    color: blue;
}
#eta .beta span.pi {
    background: green;
    color: red;
}
//...
p .frog tr.mango {
    margin: 1px 3em 2.5em 4px;
    position: static;
}
#eta .beta span.pi {
    font-size: small;
    float: left;
}
// ...
1 голос
/ 19 сентября 2008

См .: Создать переменную в файле .CSS для использования в этом файле .CSS

Подводя итог, у вас есть три основных варианта:

  1. Используйте препроцессор макросов для замены имен постоянных цветов в таблицах стилей.
  2. Использование сценариев на стороне клиента для настройки стилей.
  3. Используйте одно правило для каждого цвета, перечисляя все селекторы, к которым оно должно применяться (моя любимая ...)
0 голосов
/ 19 сентября 2008

Мне нравится идея разделения информации о цвете в отдельный файл, независимо от того, как я это делаю. Я бы принял несколько ответов здесь, если бы мог, потому что мне нравятся и Джош Миллард. Мне нравится идея иметь отдельные цветовые правила, потому что определенный тег может иметь разные цвета в зависимости от того, где он встречается. Может быть, сочетание этих двух методов будет хорошо: 

h1, p, code {
    color: #ff0000;
}

, а затем также 

.color1 {
    color: #ff0000;
}

когда вам нужно изменить стиль.

0 голосов
/ 19 сентября 2008

Когда CSS обслуживается серверным скриптом, например. PHP, как правило, кодеры создают CSS как файл шаблона и заменяют цвета во время выполнения. Это может также использоваться, чтобы позволить пользователям выбирать цветовую модель.

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

Поиск / замена могут работать, за исключением случаев, когда два изначально разных цвета оказываются одинаковыми: после этого их трудно разделить снова! : -)

Если я не ошибаюсь, CSS3 должен позволить такую ​​параметризацию. Но я не буду задерживать дыхание, пока эта функция не будет доступна в 90% браузеров, работающих в сети!

0 голосов
/ 19 сентября 2008

Я держу список всех цветов, которые я использовал, вверху файла.

0 голосов
/ 19 сентября 2008

CSS не ваш ответ. Вы хотите взглянуть на абстракцию поверх CSS, как SASS . Это позволит вам определить константы и вообще очистить ваш CSS.

Вот список CSS Frameworks .

0 голосов
/ 19 сентября 2008

Обычно лучше просто найти и заменить цвета, которые вы меняете.

Что-нибудь более мощное, чем это, будет более сложным с небольшими преимуществами.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...