Как писать правильный оптимизированный CSS?

Question

[Dubrovin]

Здравствуйте,
Возник вопрос как писать оптимизированный css-код, ведь одно и то же можно написать совершенно по-разному.
Например, можно написать
font: 700 16px Arial;
а можно

font-weight: 700; 
font-size: 16px;
font-family: Arial;

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

Comments

[Volodimir Babeshko]

Csso для gulp попробуйте, это от яндекса вроде, там есть структурная оптимизация (только все проверяйте - некоторые свойства оптимизации могут ломать верстку)

[Dubrovin]

Konstantin Abaiev, спасибо! тоже уже наткнулся на CSSO.
А не знаете есть ли какой нибудь линтер для SCSS под PHPStorm ?

[Volodimir Babeshko]

Dubrovin, насчет линтеров не подскажу

[pavelkunyavskiy]

Ох ты ж божечки, вот это чудо-оптимизация, бугагашечка.

Answer 1

[ValeraValera]

Советы по написанию современного CSS

Comments

[Dubrovin]

Спасибо за отличную статью!

Answer 2

[Андрей]

это не совсем одно и то же. Свойство font неизменно изменит все 3 атрибута, в то время как font-weight, font-size и font-family изменят по одному, не повлияв на другие 2. То есть если вам нужно, грубо говоря, инициализировать отображение, стоит начать со свойства font, но если в какой-то момент возникает необходимость переопределить значение одного лишь из свойств (модификатор какой), то тогда логичнее использовать свойства по отдельности.

В таком случае, если возникнет необходимость, скажем, изменить font-family везде, Вам не придется шарахаться по коду и искать все вхождения этого шрифта, а изменить его лишь в 1 месте. Лично я практически всегда использую второй вариант, пара лишних байт сайт не утяжелят.

Comments

[Dubrovin]

Спасибо за ответ. Да, вы правы, не совсем одно и то же, если переопределять свойства, но хотелось бы чтобы IDE подсказывала когда свойства действительно можно объединить.

[Максим Федоров]

Dubrovin,

но хотелось бы чтобы

зачем?

[Ankhena]

Dubrovin,

но хотелось бы чтобы

Сравните экономию байтиков с любой из картинок и спите спокойно.

[Андрей]

Dubrovin, это нездоровый перфекционизм. Скоро пройдет)

[Андрей]

Dubrovin, система не может знать что хочет человек, так как она подскажет, стоит ли объединять свойства или нет?

[Dubrovin]

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

[Ankhena]

Dubrovin, ничего не мешает критические стили писать в head

[Dubrovin]

Ankhena, Я с вами согласен, но размер одного и того же CSS кода может отличаться в разы при использовании разных "подходов".

[Ankhena]

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

И еще у меня есть любимая ссылка https://csswizardry.com/2012/11/code-smells-in-css/

Answer 3

[Александр Таратин]

Поочередно прогоняйте 3-мя минификаторами (порядок имеет значение)
cssnano
csso
crass
По моим прикидкам, данная комбинация наиболее эффективна, но требуются тесты под ваши нужны.
Для этого использую https://github.com/GoalSmashers/css-minification-b...

Comments

[Dubrovin]

Спасибо! CSSO и CRASS работают по-разному?

[Александр Таратин]

Dubrovin, Все по-разному.

Answer 4

[tema_sun]

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

Answer 5

[Dubrovin]

Нашёл отличный стайл гайд по SASS здесь: https://sass-guidelin.es/