• В чем смысл PostCSS сегодня?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    В последнее время началась мода на PostCSS - много постов, статей о нем.

    А почему бы и да? Любые инструменты надо пиарить что бы народ ими пользовался. Ибо народ будет пользоваться тем что на слуху (ну или тем с чем привык работать). Больше народа - больше идей, быстрее идет развитие, формируется комьюнити и поддерживать решение становится чуть проще. Да и приятно это когда твои наработки используют.

    Есть даже версия (не без оснований), что это - прародитель всех современных препроцессоров и веяний.

    Где ж это вы такое прочитали? postcss был попыткой решить проблемы, которые нельзя решить препроцессорами (или можно но долго).

    Окей, будем считать так, тем паче, что история коммитов на Гите это скорее подтверждает.

    Что именно подтверждает? сначала был Sass написанный рубистами что бы CSS можно было бы готовить так же нежно как они готовят HTML на HAML (кофескрипт туда же, рубистам хотелось сделать js похожим на ruby). И это заметте было в 2006-ом году! тогда и js был медленный, и V8 может только в планах был...

    Ведь все, что умеет PostCSS, умеют и препроцессоры

    postcss из коробки не умеет ровным счетом ничего. Он может только загрузить AST CSS файла и слепить из него обратно тот же CSS.

    И именно в этом сила postcss - модульность. Все существующие препроцессоры монолитны. То есть вы не можете просто так взять и добавить что-то свое туда. Да, в последних версиях less (и вроде как sass туда же подтягивается) у вас есть примитивный набор средств что бы вклиниться в процесс обработки AST документа и добавить какие-то примитивные вещи. Но это не удобно. Если вы хотите динамически менять проперти (например пересчитывать rem в em) или добавлять еще (опять же для того что бы руками не плодить в css кастыли для разных браузеров и делать это автоматом, на завязываясь ни на миксины и оставляя CSS чистым) свойств, но сделать это на less/sass сложно.

    Намного проще взять postcss и натравить это дело на результат работы препроцессоров.

    Давайте придумаем пример того, что можно легко и просто сделать при помощи пост процессоров и что сложно сделать с препроцессорами. Самое первое что приходит в голову - инлайнинг ресурсов. Например мелкие png-ки. Или работа с относительными путями, ресолвинг оных точнее. В этом случае мы с postcss напишем маленькую функцию, которая пробежится по всему абстрактному синтаксическому дереву и найдет использование url(). далее мы можем проверить размеры картинки и заинлайнить их (если у них размер достаточно маленький). Или собрать список всех задействованных картинок и использовать их потом (например что бы скопировать только то, что мы реально используем).

    Вот как-то так. А за счет того что мы имеем доступ целиком и полностью к формированию и обработке AST мы можем и синтаксис CSS развивать. Примерами могут служить многочисленные плагины аля cssnext и т.п. Можно даже большую часть фич sass в виде плагинов подключить.

    А самое забавное, что работает это все быстрее того же libsass на плюсах. За счет архитектуры (имею в виду не голый postcss а с набором плагинов добавляющих функциональность sass).
    Ответ написан
    Комментировать
  • Как правильно применить фильтр к элементу?

    websanya
    @websanya
    Фронтенд разработчик, подкастер
    Это так не работает. Фильтры как и opacity работают на весь элемент, включая его потомков.
    Ответ написан
    Комментировать