Есть ли правильный и неправильный способ форматирования 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

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

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

Answer 2

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

Answer 3

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

function (arg)
{

   body();

}

до

function(arg){
   body();
}

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

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