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

Содержание:

Библиотека if-ie.styl
- Дополнительные возможности if-ie.styl
Похожие товары
Выбор препроцессора

Библиотека if-ie.styl

согласно БЭМ

if-ie.styl

Дополнительные возможности if-ie.styl

В обоих файлах нужно подключать библиотеку до всех остальных стилей, и обязательно оба раза. (Может показаться, что хватило бы только первого — ведь таблица стилей для IE уже содержит основную таблицу стилей — но тогда некоторые последующие возможности не будут работать). В этом файле уже определяется , и поэтому в основной таблице стилей не нужно это явно прописывать.
В таблице стилей для IE пропало условие — это показана работа первой фичи библиотеки: свойство автоматически появится только в таблице стилей для IE. Конечно, и в обычных браузерах можно использовать это свойство, но на практике такая необходимость случается крайне редко, так что можно облегчить основную таблицу стилей хотя бы чуть-чуть.

Выбор препроцессора

Умная колонка, станция от Яндекса

LessSassCompass

, применённое для селектора , должно давать — подобные конструкции нужны для упрощения использования БЭМ-наименования и очень удобны, когда нужно сгенерировать в цикле множество модификаторов.
, применённое для селектора , должно дать мультикласс , но так в Sass сделать не получится: можно будет дать мультикласс только к , если написать , но не наоборот.
, применённое к , должно бы уточнить селектор до , но — увы.

фичаStylus

Stylus — очень гибкий препроцессор, и часто он оказывается гораздо гибче того же Sass. Например, parent references Stylus раскрывает идеально.
В Stylus есть такая штука как прозрачные миксины — возможность вызвать функцию как обычное CSS-свойство. То есть сначала определить , а потом вызвать её как . Такая запись будет равнозначна вызову . Для обычных функций это не всегда удобно, но зато позволяет переопределить любое имеющееся свойство. Скажем, можно переопределить в . Если серьёзно, то при использовании подобной функциональности можно легко запутаться и усложнить понимание того, что же делает код: ведь не всегда будет ясно, какие функции были определены выше по коду и что произойдёт в результате вызова очередного свойства.
Однако прозрачные миксины очень сильно упрощают поддержку, например, браузерных префиксов. Не нужно запоминать, какие префиксы имеет то или иное свойство, и заботиться о том, нужно ли для очередного свойства писать специальную конструкцию. Достаточно просто всегда писать без префиксов, а об их добавлении позаботится подключённая библиотека (мы используем для этого свой форк nib).
Stylus написан на JS. Это значит, что его проще поддерживать и править в нём баги (все разработчики интерфейса Яндекс.Почты гораздо лучше знают JS, чем Ruby). К тому же это позволяет проще использовать Stylus в цепочке с другими инструментами на node.js (например, CSSO).

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

Библиотека if-ie.styl

Дополнительные возможности if-ie.styl

Похожие товары

Выбор препроцессора