Meteor + CSS-Modules + SugarSS

  • Tutorial

Котаны!


Вы знаете про Meteor? Ну да — странный вопрос.


Вы знаете про CSS-Modules? Прощай БЭМ.


Вы знаете про SugarSS? Прощай SASS.


Перец из Техаса сегодня принял мой pull-request. И всем этим счастьем теперь можно пользоваться. CoffeeScript, Jade, SugarSS — полный комплект для кошерного кода.


А воткнулся я после лекции Андрея Ситника (спасибо):



Но это еще не всё. Прикрутил postcss-initial и postcss-autoreset — получил полную изоляцию, которая в БЭМ и не снилась.


METEOR@1.3.2.4 — package.json


{
  "dependencies": {
    "meteor-node-stubs": "~0.2.0"
  },
  "devDependencies": {
    "sugarss": "0.1.3",
    "postcss-initial": "1.5.1",
    "postcss-autoreset": "1.1.5",
    "autoprefixer": "^6.3.6",
    "postcss-modules-extract-imports": "1.0.0",
    "postcss-modules-local-by-default": "1.0.0",
    "postcss-modules-scope": "1.0.0",
    "postcss-modules-values": "1.1.1",
    "postcss-nested": "1.0.0",
    "postcss-simple-vars": "1.1.0"
  },
  "cssModules": {
    "enableSassCompilation": false,
    "enableStylusCompilation": false,
    "extensions": [
      "sss"
    ],
    "parser": "sugarss",
    "postcssPlugins": {
      "postcss-simple-vars": {
        "inlineOptions": {
          "variables": {
            "orange": "orange"
          }
        },
        "fileOptions": [
          "client/colors.txt",
          "client/fonts.json"
        ]
      },
      "postcss-initial": {"reset": "inherited"},
      "postcss-autoreset": {"reset": "initial"},
      "postcss-modules-values": {},
      "postcss-nested": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {},
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}
Share post

Similar posts

Comments 37

    +1
    Проблем с postcss-initial не наблюдалось? У меня с ним на простеньких css время сборки увеличивалось до 1.5 с. К сожалению не было времени разбираться в причинах
      –6

      Я даже не знаю, как можно замерить время. Научишь?


      Андрей обещает, что может снять любую порчу с плагинов для PostCSS.

      +3

      Вместо (ИМХО ужасных) так называемых CSS Modules использую инкапсуляцию с помощью кошерных веб-компонентов, стили пишу на SCSS, и не вижу ни малейшего смысла ставить этот PostCSS, потом выбирать, ставить и конфигурировать тучу разнообразных плагинов для того, чтобы просто написать горстку CSS.
      И да, изоляция с веб-компонентами получается полная, в отличии от того, что вы предлагаете. А ещё нативно поддерживается в Chrome и в течении года будет в других браузерах, не требует систем сборки и интуитивно понятен.


      Именно из-за такого неестественного переусложнения у начинающих мозг закипает. Зачем столько всего делать, если можно ничего из этого не делать совсем?

        –2
        Каждому свое) можно не дышать, например…
          0
          > Зачем столько всего делать, если можно ничего из этого не делать совсем?

          Карма ушла в минус, что освобождает Хабр от моих открытий. :)

            +1

            Я не трогал ни статью, ни карму. Мне не понятно зачем люди на столько усложняют себе жизнь, но если кому-то это нравится — то мне до этого нет большого дела пока меня не заставляют делать так же:)

              0
              Как пользоваться веб-компонентами сегодня? Ткни пальцем, пажаласта!
                +1

                Я бы посоветовал начать с http://webcomponents.org/
                Лично мне нравится в качестве более высокоуровневой библиотеки Polymer (он ещё включает полифилы CSS variables и CSS mixins), но в целом можно брать как простой полифил WebComponents.js и писать на низком уровне, так и выбрать другую библиотеку, как то X-Tag или Bosonic (имхо Polymer удобнее и более зрелый проект).

                  0
                  Еще не вникал ни в css-модули, ни в веб-компоненты, но вот такой вопрос возник. Первый подход использует по сути стандарты, плюс PostCSS позволяет свободно использовать синтаксис «CSS4», который в обозримом будущем также станет стандартом. А с компонентами не так просто, особенно с библиотеками. Пример из недавней статьи: «Мы писали на Polymer 0.5, и, когда он стал deprecated (с выходом версии 1.0), перед нами встал вопрос — что же выбрать?». Какова вероятность такого развития событий?
                    0
                    Первый подход использует по сути стандарты, плюс PostCSS позволяет свободно использовать синтаксис «CSS4», который в обозримом будущем также станет стандартом.

                    CSS модули это стандарт? Веб-компоненты это стандарт, а про CSS модули не слышал, судя по ссылке из статьи это не идея W3C или браузерного вендора, это какой-то костыль чтобы писать CSS в JS O_o.
                    Вот о CSS4 первый раз тоже слышу, нет такой нумерации и не будет.


                    А с компонентами не так просто, особенно с библиотеками.

                    Здесь всё достаточно просто, осложнение было в том, что вендоры никак не могли договорится по поводу изначальной спецификации, так что немного затянулось, в Chrome уже давно есть то, что сейчас называется версией 0. По поводу версии 1 все уже договорились, и до конца года у всех вендоров должна быть как минимум одна версия поддерживающая эту версию спецификации.


                    Пример из недавней статьи: «Мы писали на Polymer 0.5, и, когда он стал deprecated (с выходом версии 1.0), перед нами встал вопрос — что же выбрать?».

                    Это потому что Polymer 0.5 и задумывался как эксперимент, он не был официально стабильным и заведомо было известно что в релизе будет не так. За время развития проекта набралось много опыта разработки приложений (в том числе в продакшене, о чём и речь в статье), и как разработчик, хорошо знакомый с обоими версиями (не работаю в Google, но вхожу в top-10 контрибуторов в сам Polymer, ещё не раз отправлял патчи в полифил веб-компонентов), могу сказать что версия 1.0 на голову выше как по скорости работы, так и по устройству и удобству использования.


                    Какова вероятность такого развития событий?

                    У нас всё ещё есть библиотеки и фреймворки, которые ничего общего не имеют с веб-компонентами. Как среди них выходят обратно несовместимые версии время от времени, так и в Polymer на каком-то этапе выйдет версия 2.0, ничего такого в этом нет. Сама спецификация достаточно стабилизирована и перешла в фазу реализации в Firefox, Chrome и Safari (в нём даже есть уже предварительная версия TP в которой можно поиграться со слотами), в Edge в приоритете, но ещё не начали разработку.


                    Вот как-то так если кратко.

                      0
                      Говоря о стандартах, я имел в виду то, что там самый обычный синтаксис HTML/CSS/JS, не нужны полифиллы — вся магия творится только у разработчика.
                      CSS4 потому и взял в кавычки). Я про переменные и прочая.

                      Большое спасибо за хорошее разъяснение по поводу компонент.
                0
                Тоже самое про вас можно сказать, не нравится, не пользуй… Если вы на React не пишете, то значения css modules вам не понять.
                  +3

                  Как-то обойдусь без CSS/JS/HTML в одном файле:)

                    –1
                    Этот ваш ответ как ничто другое отлично показывает, что с Реактом вы если и работали — на уровне тудушек :)
                      –1
                      upd. Не в смысле, что это что-то плохое. Просто мнение «CSS/JS/HTML в одном файле» пропадает при более-менее осознанной работе.
                        0

                        Не работал. Мне очень нравятся идеи неизменяемости и чистых функций, однонаправленного потока данных и всё такое, я смотрел разные выступления по поводу React, особенно интересно было смотреть как Firefox Dev Tools на React переписывают.


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


                        Само собой на каждый инструмент есть свой пользователь, просто мне он в некоторых аспектах совершенно не нравится.

                          0
                          Так вот именно, что нет. В кашу все не смешивается. Смешивается только представление, что как бы отлично! Разметка и шаблон, логика отображения. Все вместе.
                          Бизнес-логика отдельно.

                          /////Для совсем простеньких компонентов оно ещё куда не шло (хотя чисто эстетически как-то так себе), но вот что-то более сложное я бы не стал на нём делать./////
                          Вы правы. Но только есть речь о Реакте без его экосистемы (redux, graphQL и тд), которая как раз решает вопросы масштабирования.

                          ////Само собой на каждый инструмент есть свой пользователь, просто мне он в некоторых аспектах совершенно не нравится./////
                          +100500 :)
                            0
                            как бы отлично

                            «Как бы», вот именно. Можно прекрасно держать вместе разметку и ее логику, при этом не вводя адский новый синтаксис и не пиша дивы и спаны в JS — чему пример как раз vue-loader.

                              –1
                              Зачем цепляться к словам? Всего-лишь оборот.
                              В чем неприятность многих фреимворков типа vue или angular — они привносят свой синтаксис. Свои какие-то конструкции. Тот же Реакт позволяет писать на чистом языке. Что «как бы отлично» :)))

                              Прошу прощения… Спор ни о чем. Завязываю.
                                +1

                                React позволяет писать на чистом языке? Действительно, пора завязывать.

                    0
                    Обсудил веб-компоненты с коллегой — любителем React-а, который навёл меня на CSS-Modules. Наблюдается устойчивая негативная реакция. :)

                    Я только-только подружился с MDL. И снова надо пересаживаться, теперь на Polymer.
                  0
                  > не вижу ни малейшего смысла ставить этот PostCSS

                  Да ладно, и autoprefixer не нужен? PostCSS все равно присутствует в проекте. Почему бы ему не отдать обработку CSS полностью, если обещает делать тоже самое, что и препроцессоры, но быстрее и с любыми капризами?
                    +1

                    1) В статье про autoprefixer ничего не сказано, хотя я бы если и использовал его — то скорее при сборке production варианта (поддерживая IE10+ совсем не много префиксов нужно, так что несколько CSS mixins и вообще ничего не нужно)
                    2) Если присутствует — ОК, статья же, как мне показалось, предлагает замену SASS:


                    Прощай БЭМ
                    Прощай SASS

                    Хотя веб-компоненты на самом деле решают проблему BEM на корню (потому как BEM это хак, который проблему на самом-то деле совершенно не решает, стили остаются в глобальном пространстве), а не городят очередной костыль.


                    К тому же по поводу скорости — у меня SCSS компилируется мгновенно, вы же не пересобираете на каждый чих весь проект? А один файл, каким бы он ни был, собрать за несколько миллисекунд совершенно не проблема как мне кажется.

                      0
                      В статье про autoprefixer ничего не сказано, хотя я бы если и использовал его — то скорее при сборке production варианта (поддерживая IE10+ совсем не много префиксов нужно, так что несколько CSS mixins и вообще ничего не нужно)

                      Ну это очень спорно. Префиксов в моей верстке вагон с тележкой. И про autoprefixer в статье было.

                      0
                      А зачем, если и препроцессоры отлично справляются? Плюс поддержка более-менее популярных SASS/Less/Stylus есть везде, а поставлю я этот SugarSS и кто мне синтаксис подсветит?
                        0

                        Задавался тем же вопросом до лекции Андрея Ситника.


                        А подсветка есть.

                          0
                          Про подсветку проглядел, каюсь.
                            0
                            Мои метания между SASS/Less/Stylus остались в прошлом. PostCSS конфигурабелен на любой вкус. И декларируется, что работает шибко быстрее.
                              0

                              То есть вместо того чтобы взять Stylus, который из коробки работает, как мне надо, я буду брать SugarSS, плагин для переменных, плагин для миксинов, плагин для функций и все это конфигурить под каждый проект?:)


                              Что такое в разы быстрее? Если проект собирается, скажем, не 2 секунды, а 0.2 — мне без разницы, я эти 2 секунды переключаюсь с IDE на браузер.

                                0
                                А вы пробовали брать всё это? Ставится 3 пакета, включая precss, подключаются в gulp и всё готово. Безусловно потребуется время, чтобы разобраться в postcss и его экосистеме, но с ним вы не будете ограничены той функциональностью, что дают вам разработчики stylus-a.
                                А зачем мне покупать автомобиль и обслуживать его, если я могу на лошадях ездить? :)
                                  0
                                  Стопэ (как говорит один знакомый мент), какой gulp?! Мы же в Хопре. :)

                                  В контексте Метеора достаточно подключить пакет juliancwirko:postcss (если CSS-Modules — это зло, в чем убедили выше).

                                    0
                                    Фух, всё же нашёл. Я там напоролся на неприятный косячок: https://github.com/juliancwirko/meteor-postcss-test/issues/1
                                    0

                                    А в чем таком меня Stylus ограничивает, скажите пожалуйста? Переменные, миксины, функции и удобный синтаксис есть — что мне еще надо?


                                    Я, как и все, люблю новые технологии и мегаконфигурабельные общие библиотеки всего. Я соскочил на Stylus, как только его увидел, например. Но в данном случае я не вижу профита. Ок, я не супер-верстальщик и многого не понимаю в волшебном мире CSS, я все больше по JS, но если бы мне, как лошадевладельцу, предложили заменить мою лошадь на НЕХ, которая будет точно так же жрать овес, таскать телегу и гадить навозом, но которую надо сначала еще собрать из четырех частей и отдебажить — я бы долго недоумевал. Тут ведь нет такой разницы, как между plain css и препроцессором.


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

                                      0
                                      Это называется «уговаривайте меня». Я же для себя выбираю инструментарий на самом деле. Агитки публикую больше из озорства. :)
                                        0

                                        Я честно пытаюсь понять, в чем смысл, вдруг я упускаю что-то стоящее. Извините, если звучу занудно.

                                          0
                                          И видео-ролик не впечатляет?
                      0
                      Спрашивали — отвечаю. Нарыл http://x-tag.github.io/overview

                      Only users with full accounts can post comments. Log in, please.