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

Вот хороший вариант:

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

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

Наверное, много. В своей работе мы используем:

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

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

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

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

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

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

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

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

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

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

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

Так что делайте это простым (KISS), линейным (greppable) и компактным (используйте font: вместо font-size и т. д.).

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

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

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

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

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

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

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

Я согласен с большинством пунктов ссылки Эндрю Хейра, но я сильно считаю

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

Стандартного стандарта как бы нет. Безусловно, существует множество внутренних стандартов и условностей. И, безусловно, есть известные передовые практики.

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

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

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

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

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

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

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

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

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

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

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

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

@Импортировать

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

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

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

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

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

Это также может быть полезно, несколько советов по сохранению ваших стилей CSS СУХИМИ - как в «Не повторяйся» текст ссылки

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

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