Плюсы и минусы CSS форматирования

Question

Плюсы и минусы форматирования CSS

Я знаю четыре вида форматирования CSS. Как вы думаете, что лучше?

А) классика

.class1 {
}
.class1 .class2 {
}
.class1 .class2 .class3 {
}
.classFoo {
}

B) классическая идентификация

.class1 {
}
    .class1 .class2 {
    }
        .class1 .class2 .class3 {
        }
.classFoo {
}

C) та же строка

.class1 {}
.class1 .class2 {}
.class1 .class2 .class3 {}
.classFoo {}

D) идентичная линия идентифицирована

.class1 {}
    .class1 .class2 {}
        .class1 .class2 .class3 {}
.classFoo {}

Answer 1

Честно говоря, я не думаю, что имеет значение, какой стиль вы используете, при условии, что вы используете его последовательно и , это было согласовано с кем-либо еще, кто может работать с вами над теми же проектами и в соответствии с любыми конкретными требованиями к документации, предъявляемыми вашим рабочим местом / офисом.

Сказав это, я предпочитаю стиль А, с группами, организованными примерно по происхождению:

.className {
    width: 50%;
    background-color: #fff;
    /* ...etc... */
}

.className .descendantOne {
    /* ...stuff... */
}

.className .descendantTwo {
    /* ...stuff... */
}

.anotherClassName {
    /* ...stuff... */
}

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

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

Answer 2

Для огромной таблицы стилей, B, так как легче ориентироваться из-за всех вкладок. (Использование чего-то вроде SASS усиливает это).

Для очень минимального, A.

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

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

Answer 3

Плюсы:

• Очень легко ориентироваться и быстро находить свойства

• Легче понять при перемещении элементов

Минусы:

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

• Другие люди могут быть незнакомы с вашим форматированием (но я бы об этом не беспокоился)

Answer 4

Вы обычно видите отступ только в том случае, если это css, созданный с помощью sass или менее. Если вы не используете sass (что следует делать, если можете), это в основном вопрос vs c. c имеет смысл, когда у вас есть только одна настройка для правила, a имеет смысл, когда у вас есть больше, чем это.