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

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

Ответ 1

Вот хороший:

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

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

Ответ 2

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

.class-name {
    color: green;
}

уступает:

.class-name
{
    color: green;
}

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

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

или

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

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

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

Ответ 3

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

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

Структура вашего CSS в соответствии с его назначением
Это может включать разделение проблем CSS на разные файлы (layout.css, colors.css и т.д.). Это может также включать четкое разделение одного CSS файла на четкие разделы по тем же строкам.
Будьте как можно более конкретными
Селекторы имеют разные веса. Селекторы на основе идентификатора более специфичны, чем селекторы на основе классов. Цепные селекторы (например, body div#container div#content p) очень специфичны.

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

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

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

Если вы сами установили все соответствующие стили, вы знаете, каков должен быть конечный результат.

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

Ответ 4

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

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

@import

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

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

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

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

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

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

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

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

Ответ 10

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

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

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

Ответ 11

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

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

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

Ответ 12

Это также может быть полезно, несколько советов по сохранению стилей CSS DRY - как в разделе "Не повторяйте себя" текст ссылки

Ответ 13

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

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