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

Когда я впервые начал писать 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. Является ли это действительным способом делать код или придерживаться стандартов при его установке в Интернете, если я использую вместо этого вертикальную форму?

Ответ 1

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

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

Multi-line легче отслеживать, а отступы могут вводить в заблуждение, поскольку 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.

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

Ответ 7

Я предпочитаю второй стиль, но имейте в виду, что это стиль. Точно так же, как некоторые люди предпочитают

function (arg)
{

   body();

}

function(arg){
   body();
}

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

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

Ответ 8

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

Ответ 9

Я думаю, что это также зависит от вашего редактора. Я использую многострочное форматирование и уплотняю каждое определение с помощью складывания Vim (я установил метки сложения { и }), поэтому я получаю один тег/класс/идентификатор в строке, расширяемый, когда это необходимо.

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

Ответ 10

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

Ответ 11

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

Ответ 12

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

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

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

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

Ответ 13

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

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

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

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