Стиль кодирования CSS

Question

Есть ли хороший стиль/стандарты кодирования CSS?

Answer 1

Вот хороший один:

http://www.phpied.com/css-coding-conventions/

Но главное, чтобы выбрать что-то и придерживаться его консистенции.

Answer 2

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

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

В = DIV позволяет искать по всем Div элементов с помощью функции поиска. Там больше нагрузок, но в прошлом я использовал много разных вариантов.

Answer 3

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

Answer 4

Когда я код в CSS:

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

Вы можете увидеть некоторые примеры в CSS Zen Garden

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

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

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

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

Answer 5

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

Так что держите его простым (KISS), основанным на строке (greppable) и держите его компактным (используйте шрифт: вместо шрифта и т. Д. И т. Д.).

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

Answer 6

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

См. Progressive Enhancement.

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

Answer 7

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

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

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

Answer 8

Я согласен с большинством пунктов в связи Андрея Зайца, но я сильно верю

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

Answer 9

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

Я придерживаюсь следующее:

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

• быть как можно более конкретным
  селекторы имеют разные веса. Селекторы на основе идентификатора более специфичны, чем селекторы на основе классов. Цепные селекторы (например, body div#container div#content p) очень специфичны.
  

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

  Определение стиля с ограниченной специфичностью может касаться элементов, которые вы не намеревались способами, которые не сразу очевидны или очевидны. Я думаю, что это является наиболее распространенной причиной CSS фрустрации («Почему на земле это div не позволяет мне установить верхний край?»)

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

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

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

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

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

Answer 10

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

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

@import

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

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

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

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

Answer 11

Поместите свои правила css (например: «color: red;») в алфавитном порядке, а также поместите свои селекторы (например: «div {color: red;)»), чтобы они отображались в вашей разметке. Отдельный код для структуры из скина.

Answer 12

Это также может быть полезным, несколько советов, чтобы сохранить ваши стили CSS DRY - как в «Не повторяться» link text

Answer 13

Я настоятельно рекомендую смотреть на Less: http://lesscss.org

Хотя на самом деле не стандарт, он набирает много времени в последнее время. Меньше - расширение css, которое запускается в браузере, внося переменные и функции в язык и, следовательно, позволяя создавать шаблоны.