Котаны!
Вы знаете про 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"]}
}
}
}Комментарии (37)
nazarpc
31.05.2016 04:22+3Вместо (ИМХО ужасных) так называемых CSS Modules использую инкапсуляцию с помощью кошерных веб-компонентов, стили пишу на SCSS, и не вижу ни малейшего смысла ставить этот PostCSS, потом выбирать, ставить и конфигурировать тучу разнообразных плагинов для того, чтобы просто написать горстку CSS.
И да, изоляция с веб-компонентами получается полная, в отличии от того, что вы предлагаете. А ещё нативно поддерживается в Chrome и в течении года будет в других браузерах, не требует систем сборки и интуитивно понятен.
Именно из-за такого неестественного переусложнения у начинающих мозг закипает. Зачем столько всего делать, если можно ничего из этого не делать совсем?
comerc
31.05.2016 10:01> Зачем столько всего делать, если можно ничего из этого не делать совсем?
Карма ушла в минус, что освобождает Хабр от моих открытий. :)
nazarpc
31.05.2016 10:04+1Я не трогал ни статью, ни карму. Мне не понятно зачем люди на столько усложняют себе жизнь, но если кому-то это нравится — то мне до этого нет большого дела пока меня не заставляют делать так же:)
comerc
31.05.2016 10:12Как пользоваться веб-компонентами сегодня? Ткни пальцем, пажаласта!
nazarpc
31.05.2016 10:31+1Я бы посоветовал начать с http://webcomponents.org/
Лично мне нравится в качестве более высокоуровневой библиотеки Polymer (он ещё включает полифилы CSS variables и CSS mixins), но в целом можно брать как простой полифил WebComponents.js и писать на низком уровне, так и выбрать другую библиотеку, как то X-Tag или Bosonic (имхо Polymer удобнее и более зрелый проект).
Kater-auf-Dach
31.05.2016 21:16Еще не вникал ни в css-модули, ни в веб-компоненты, но вот такой вопрос возник. Первый подход использует по сути стандарты, плюс PostCSS позволяет свободно использовать синтаксис «CSS4», который в обозримом будущем также станет стандартом. А с компонентами не так просто, особенно с библиотеками. Пример из недавней статьи: «Мы писали на Polymer 0.5, и, когда он стал deprecated (с выходом версии 1.0), перед нами встал вопрос — что же выбрать?». Какова вероятность такого развития событий?
nazarpc
31.05.2016 21:32Первый подход использует по сути стандарты, плюс 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 в приоритете, но ещё не начали разработку.
Вот как-то так если кратко.
Kater-auf-Dach
31.05.2016 22:54Говоря о стандартах, я имел в виду то, что там самый обычный синтаксис HTML/CSS/JS, не нужны полифиллы — вся магия творится только у разработчика.
CSS4 потому и взял в кавычки). Я про переменные и прочая.
Большое спасибо за хорошее разъяснение по поводу компонент.
eshimischi
31.05.2016 10:58Тоже самое про вас можно сказать, не нравится, не пользуй… Если вы на React не пишете, то значения css modules вам не понять.
nazarpc
31.05.2016 11:01+3Как-то обойдусь без CSS/JS/HTML в одном файле:)
YNile
31.05.2016 14:06-1Этот ваш ответ как ничто другое отлично показывает, что с Реактом вы если и работали — на уровне тудушек :)
YNile
31.05.2016 16:30-1upd. Не в смысле, что это что-то плохое. Просто мнение «CSS/JS/HTML в одном файле» пропадает при более-менее осознанной работе.
nazarpc
31.05.2016 17:21Не работал. Мне очень нравятся идеи неизменяемости и чистых функций, однонаправленного потока данных и всё такое, я смотрел разные выступления по поводу React, особенно интересно было смотреть как Firefox Dev Tools на React переписывают.
Но вот глобальное состояние (в некоторых случаях) и вот эта каша всё в одном файле (всегда) это как раз то, что мы давно пытались искоренить, и что мне очень нравится в подходе с нативными веб-компонентами. А теперь приходят ребята в синих сапогах с маркетологами и такие, типа, типа забудьте всё что вас учили, всё что было плохо это на самом деле хорошо, вот как всё красиво в куче можно лепить. Для совсем простеньких компонентов оно ещё куда не шло (хотя чисто эстетически как-то так себе), но вот что-то более сложное я бы не стал на нём делать.
Само собой на каждый инструмент есть свой пользователь, просто мне он в некоторых аспектах совершенно не нравится.
YNile
31.05.2016 18:31Так вот именно, что нет. В кашу все не смешивается. Смешивается только представление, что как бы отлично! Разметка и шаблон, логика отображения. Все вместе.
Бизнес-логика отдельно.
/////Для совсем простеньких компонентов оно ещё куда не шло (хотя чисто эстетически как-то так себе), но вот что-то более сложное я бы не стал на нём делать./////
Вы правы. Но только есть речь о Реакте без его экосистемы (redux, graphQL и тд), которая как раз решает вопросы масштабирования.
////Само собой на каждый инструмент есть свой пользователь, просто мне он в некоторых аспектах совершенно не нравится./////
+100500 :)
k12th
31.05.2016 19:11как бы отлично
«Как бы», вот именно. Можно прекрасно держать вместе разметку и ее логику, при этом не вводя адский новый синтаксис и не пиша дивы и спаны в JS — чему пример как раз vue-loader.
YNile
31.05.2016 19:43-1Зачем цепляться к словам? Всего-лишь оборот.
В чем неприятность многих фреимворков типа vue или angular — они привносят свой синтаксис. Свои какие-то конструкции. Тот же Реакт позволяет писать на чистом языке. Что «как бы отлично» :)))
Прошу прощения… Спор ни о чем. Завязываю.
comerc
31.05.2016 23:28Обсудил веб-компоненты с коллегой — любителем React-а, который навёл меня на CSS-Modules. Наблюдается устойчивая негативная реакция. :)
Я только-только подружился с MDL. И снова надо пересаживаться, теперь на Polymer.
comerc
31.05.2016 10:30> не вижу ни малейшего смысла ставить этот PostCSS
Да ладно, и autoprefixer не нужен? PostCSS все равно присутствует в проекте. Почему бы ему не отдать обработку CSS полностью, если обещает делать тоже самое, что и препроцессоры, но быстрее и с любыми капризами?nazarpc
31.05.2016 10:40+11) В статье про autoprefixer ничего не сказано, хотя я бы если и использовал его — то скорее при сборке production варианта (поддерживая IE10+ совсем не много префиксов нужно, так что несколько CSS mixins и вообще ничего не нужно)
2) Если присутствует — ОК, статья же, как мне показалось, предлагает замену SASS:
Прощай БЭМ
Прощай SASS
Хотя веб-компоненты на самом деле решают проблему BEM на корню (потому как BEM это хак, который проблему на самом-то деле совершенно не решает, стили остаются в глобальном пространстве), а не городят очередной костыль.
К тому же по поводу скорости — у меня SCSS компилируется мгновенно, вы же не пересобираете на каждый чих весь проект? А один файл, каким бы он ни был, собрать за несколько миллисекунд совершенно не проблема как мне кажется.
comerc
31.05.2016 12:59В статье про autoprefixer ничего не сказано, хотя я бы если и использовал его — то скорее при сборке production варианта (поддерживая IE10+ совсем не много префиксов нужно, так что несколько CSS mixins и вообще ничего не нужно)
Ну это очень спорно. Префиксов в моей верстке вагон с тележкой. И про autoprefixer в статье было.
k12th
31.05.2016 10:55А зачем, если и препроцессоры отлично справляются? Плюс поддержка более-менее популярных SASS/Less/Stylus есть везде, а поставлю я этот SugarSS и кто мне синтаксис подсветит?
comerc
31.05.2016 12:52k12th
31.05.2016 13:33Про подсветку проглядел, каюсь.
comerc
31.05.2016 21:54Мои метания между SASS/Less/Stylus остались в прошлом. PostCSS конфигурабелен на любой вкус. И декларируется, что работает шибко быстрее.
k12th
31.05.2016 22:02То есть вместо того чтобы взять Stylus, который из коробки работает, как мне надо, я буду брать SugarSS, плагин для переменных, плагин для миксинов, плагин для функций и все это конфигурить под каждый проект?:)
Что такое в разы быстрее? Если проект собирается, скажем, не 2 секунды, а 0.2 — мне без разницы, я эти 2 секунды переключаюсь с IDE на браузер.
shoomyst
31.05.2016 22:18А вы пробовали брать всё это? Ставится 3 пакета, включая precss, подключаются в gulp и всё готово. Безусловно потребуется время, чтобы разобраться в postcss и его экосистеме, но с ним вы не будете ограничены той функциональностью, что дают вам разработчики stylus-a.
А зачем мне покупать автомобиль и обслуживать его, если я могу на лошадях ездить? :)comerc
31.05.2016 22:37Стопэ (как говорит один знакомый мент), какой gulp?! Мы же в Хопре. :)
В контексте Метеора достаточно подключить пакет juliancwirko:postcss (если CSS-Modules — это зло, в чем убедили выше).
comerc
31.05.2016 22:49Фух, всё же нашёл. Я там напоролся на неприятный косячок: https://github.com/juliancwirko/meteor-postcss-test/issues/1
k12th
31.05.2016 22:38А в чем таком меня Stylus ограничивает, скажите пожалуйста? Переменные, миксины, функции и удобный синтаксис есть — что мне еще надо?
Я, как и все, люблю новые технологии и мегаконфигурабельные общие библиотеки всего. Я соскочил на Stylus, как только его увидел, например. Но в данном случае я не вижу профита. Ок, я не супер-верстальщик и многого не понимаю в волшебном мире CSS, я все больше по JS, но если бы мне, как лошадевладельцу, предложили заменить мою лошадь на НЕХ, которая будет точно так же жрать овес, таскать телегу и гадить навозом, но которую надо сначала еще собрать из четырех частей и отдебажить — я бы долго недоумевал. Тут ведь нет такой разницы, как между plain css и препроцессором.
Тот же автопрефиксер начинал свою жизнь как отдельная либа, живущая без PostCSS-экосистемы и никому это не мешало.
comerc
31.05.2016 22:58Это называется «уговаривайте меня». Я же для себя выбираю инструментарий на самом деле. Агитки публикую больше из озорства. :)
shoomyst
Проблем с postcss-initial не наблюдалось? У меня с ним на простеньких css время сборки увеличивалось до 1.5 с. К сожалению не было времени разбираться в причинах
comerc
Я даже не знаю, как можно замерить время. Научишь?
Андрей обещает, что может снять любую порчу с плагинов для PostCSS.