Есть ли правильный и неправильный способ форматирования CSS?

Question

Когда я впервые начал писать CSS, я писал его в развернутом виде

div.class {
    margin:      10px 5px 3px;
    border:      1px solid #333;
    font-weight: bold;
    }
    .class .subclass {
        text-align:right;
        }

но теперь я пишу css так: (пример из кода, который я сейчас пишу)

.object1 {}
    .scrollButton{width:44px;height:135px;}
        .scrollButton img {padding:51px 0 0 23px;}
.object2 {width:165px;height:94px;margin:15px 0 0 23px;padding:15px 0 0 10px;background:#fff;}
    .featuredObject .symbol{line-height:30px; padding-top:6px;}
    .featuredObject .value {width:90px;}
        .featuredObject .valueChange {padding:5px 0 0 0;}
        .featuredObject img {position:absolute;margin:32px 0 0 107px;}

, и я начинаю беспокоиться, потому что большую часть времени я вижу, как первая форма сделана в примерах онлайн, в то время как мне кажется, что со второй формой мне намного легче работать. Он имеет более низкую вертикальную высоту, поэтому я могу сразу увидеть все классы с меньшим количеством прокрутки, табуляция иерархии кажется более очевидной, и это больше похоже на код, который я написал бы с использованием javascript или html. Является ли это допустимым способом выполнения кода или соблюдения стандартов при размещении его в Интернете, если вместо этого использовать вертикальную форму?

Answer 1

Ну, вот что говорят больше всего:)

Резюме: css-tricks.com провел опрос. Приблизительно от 3 до 1 большинство людей предпочитают многострочные однострочные стили CSS.

Answer 2

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

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

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

Answer 3

Указание иерархии с использованием отступов - неплохая идея. Тем не менее, вы должны быть осторожны, чтобы не обмануть себя. В вашем примере вы можете предполагать, что .scrollButton всегда находится внутри .object1. Но CSS не подчиняется этому правилу. Если вы используете класс .scrollButton вне .object1, он все равно получит стили.

Answer 4

Мне лично трудно прочитать оба ваших примера, особенно второй.

За многострочными легче следовать, а отступы могут вводить в заблуждение, поскольку CSS не обязательно применяется таким образом. Ваш отступ может заставить вас поверить в это.

Я предпочитаю базовый проверенный и многолинейный метод с разумным / логическим порядком:

div.class 
{
    margin: 10px 5px 3px;
    border: 1px solid #333;
    font-weight: bold;
}
.class
{
    text-align: center;
    margin-left: 10px;
}
.class .subclass 
{
    text-align:right;
}

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

В конце концов, если вы очень согласуетесь с вашей работой и всей командой (если применимо), то нет более правильного ответа.

Answer 5

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

Answer 6

Я не знаю о вас, но мне нравится вертикальный режим во время разработки, так как мне гораздо легче читать.

Однако в Prod вы хотите сжать CSS для уменьшения полезной нагрузки, и, следовательно, второй стиль имеет смысл. В основном, для этого вам понадобится какой-нибудь CSS-компрессор.

Answer 7

Мне всегда нравился этот стиль:

#something1 {
    color          : #ffffff;
    background     : #000000;
}

#something2 {
    color          : #000000;
    background     : #ffffff;
}

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

Answer 8

Возможно, когда у вас есть несколько селекторов и одно правило, например:

#header li a, #header li span {
    display:inline-block;
}

Итак, я предпочитаю делать:

#header li a,
#header li span {
    display:inline-block;
}

Answer 9

Я предпочитаю многострочное вплоть до развертывания. В этот момент я хочу минимизировать его.

Answer 10

Я просто хочу отметить, что Textmate имеет опцию, которая позволяет легко переключаться между этими двумя стилями, выделив область и нажав Ctrl-Q / Ctrl-Alt-Q, чтобы развернуть / свернуть. Как следствие, я обнаружил, что предпочитаю, чтобы мой CSS свернулся, если я не пишу или не занимаюсь глубокой отладкой определенного раздела. Но благодаря возможности легко переключаться между двумя я вижу, что оба способа полезны для разных обстоятельств.