Стиль кодирования CSS [закрывается]

Я соглашаюсь с большинством точек в ссылке Andrew Hare, но я сильно верю

.class-name {
    color: green;
}

, является нижним к:

.class-name
{
    color: green;
}

на том основании, что:

.class-name, .class-name2 {
    color: green;
}

или:

.class-name, 
.class-name2 {
    color: green;
}

значительно менее очевидны для grep или чтения, чем:

.class-name, 
.class-name2 
{
    color: green;
}

Довольно стиль кодирования скорость сайта VS

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

@import

Одна вещь использует @import. Это - на самом деле узкое место - уходя от использования @import полностью, сайт стал намного более мгновенным.

#every .style {в одной строке}

, Когда браузер читает документ, это читает линию за линией, таким образом, путем переключения от моего довольно стиля кодирования до этого, я выполнил 2 вещи;

1. А еще более мгновенный сайт
2. Меньше прокрутки, лучший обзор. Почему? Причина, которую я сначала прокручиваю вниз для нахождения стиля, я собираюсь работать с, затем это - все в той же строке, и не трудно прокрутить глаза вдоль строки для нахождения то, что Вы ищете.

Нет никакого стандартного стандарта, как это было. Существует несомненно много внутренних стандартов и конвенций. И существуют, конечно, известные лучшие практики.

я придерживаюсь следующего:

• Структурируют Ваш CSS согласно, он - цель
  , Который может включить выделение проблем CSS в различные файлы (layout.css, colors.css и т.д.). Это может точно также включить ясно деление единственный файл CSS в ясные разделы в том же направлении.

• Быть максимально конкретными
  Селекторы имеют отличающиеся веса. Основанные на идентификаторе селекторы более конкретны, чем основанные на классах селекторы. Цепочечные селекторы (например, body div#container div#content p) очень конкретны действительно.
  

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

  определение стилей А со свободной спецификой может предназначаться для элементов, которые Вы не предназначали способами, которые не сразу очевидны или очевидны. Я думаю, что это - наиболее распространенная причина разочарований CSS ("С какой стати это div не позволит мне установить верхнее поле?")

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

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

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

• Использование id с для моделирования уникальных элементов
  Это обычно - хорошая идея применяться id атрибут к любому уникальному элементу, который будет, взаимодействовал со всегда. Для CSS это позволит Вам применить соответственно определенные стили более легко.

• Использование id на уникальной странице
  Страницы, которые существенно отличаются в стиле и расположении большинству (домашняя страница, результаты поиска, 404) должно иметь id на body элемент. Это дает Вам специфику, необходимо удостовериться, что тщательное моделирование домашней страницы не становится затронутым стилями, Вы позже обращаетесь к некоторой внутренней странице содержания.

Когда я кодирую в CSS:

• В первой первой части пишут, что класс и идентификатор
• В последней первой части пишут общий элемент (p, шрифт, и т.д.), потому что класс и идентификатор имеют больше важности для наследования
• , я пишу комментарий, если я хочу особое поведение с IE, или с Браузером MoSE

Вы видите некоторый пример в CSS Zen-Garden

Обычно, я вставляю самые важные элементы по другому: если существует

p.important{/*features of a class*/}

p {/*features of a general element */}

Чтение файла CSS, я знаю правила формата прежде о большинстве конкретный элементы после правил о большинстве общий элементы.
Это - привычка в программировании Java.

Поместите свои правила CSS (исключая: "цвет: красный";) в алфавитном порядке и также помещенный Ваши селекторы (исключая: "отделение {цвет: красный;}") в порядке они появляются в Вашей разметке. Отдельный код для структуры от кожи.

Только на основе опыта я раньше писал довольно длинные таблицы стилей CSS. Теперь мои таблицы стилей обычно составляют половину страницы.

Так сохраняют это простым (KISS), строка базирующийся (greppable) и сохраняют это компактным (используйте шрифт: вместо размера шрифта и т.д. и т.д.).

Также я настоятельно рекомендую использование CSSlint для проверки кода на пух.

Проверьте Дерзость . Это - шаблонный язык для CSS, который делает Ваш исходный код DRY:er и mucho легкий читать. Даже если Вы не используете рубин, можно использовать его для этой задачи и автоматизировать здание файлов CSS из источника Дерзости. И существуют, вероятно, реализации Дерзости на других языках также.

Существуют, вероятно, загрузки. На нашей работе мы используем следующее:

/* =div a comment about my div */
div#mydiv {
    border:1px solid #000;
}

=div позволяет нам искать против всех элементов отделения при помощи функциональности поиска. Существуют загрузки больше, хотя, я использовал много различных изменений этого в прошлом.

Основной хороший стиль кодирования состоит в том, чтобы на самом деле разделить файлы CSS согласно их целям.

См. Прогрессивное Улучшение .

Тот путь, безотносительно кодирования конвенции Вы выберете, у Вас будут последовательные и управляемые отдельные файлы CSS... легче отладить.

Это также может быть полезно, несколько советов, как сохранить стили CSS сухими - как в «Не повторяйся» « текст ссылки

В дополнение к тому, что сказали другие, помните, что C обозначает 'Расположение каскадом', т.е. подэлементы наследовались высокоуровневым элементам. Звучите простыми и немедленно. Но я часто видел файлы CSS, которые содержат избыточные объявления, например, для стилей шрифтов. Это делает CSS более сложным и твердым поддержать.

Поэтому перед добавлением, что-то к CSS удостоверяется, что это не избыточно, т.е. проверьте родительские элементы и удалите избыточные объявления от детей.

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