Pull to refresh

Comments 41

Styled components — так-себе эволюция. Вторая ветка пока не зарелизилась, а в первой были порой детские проблемы: https://habrahabr.ru/company/jugru/blog/315772/#comment_9923636


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

В итоге что?
В итоге — все эти пре/пост процессоры никакого отношения к CSS не имеют, они всего лишь «организую» декларации в структуре проекта. Никакая эволюция CSS тут не значится, эволюционируют инструменты.

На мой взгляд, проблемы никакой нету, когда версткой занимается верстальщик, а программист — программированием.

А вот когда программисты занимаются версткой — вот тогда начинается весь этот зоопарк, который вместо ПРОСТОТЫ с дальнейшей поддержкой, дает лишнюю головную боль. В CSS не должно быть никаких переменных и вычислений, у него декларативная роль.

Пишите на чистом CSS, а инструментам отведите роль пространства имен и сборщика — тогда будет всем счастье…

Точно, эволюция CSS это CSS от версии 1 до версии 3, и не нужно из CSS делать язык программирования усложняя простое! Он и так прост и шаблонен до не куда, используйте фреймворки CSS для облегчения процесса верстки типа Bootstrap, остальные инструменты по моей практике лишь усложняют процесс
и не нужно из CSS делать язык программирования усложняя простое!

А это разве усложнение? Зачем это разделение на верстку и программирование? Почему бы не думать не в масштабах сайта, а в масштабах компонентов, где каждый небольшой элемент пишется одним человеком, который пишет и логику, и стили, и верстку? А раз он пишет все, так почему бы не писать это в одном месте (!= в одном файле) единообразно (т.е. все в виде react-компонентов)? При этом мы получаем еще и реактивные стили.

А вот сама реализация styled-components мне не нравится, сейчас работаю над чем-то похожим, но для clojure
А если жизнь крутится не только вокруг React?)
То в этом случае я могу сказать, что понятие компонент есть не только в react) Веб-компоненты с shadow-dom, angular 2 тоже вроде как на компонентах, amp, да даже старые добрые jquery-виджеты.
Вообще, лет так эдак через 10 джуны будут бегать по форумам, искать готовые компоненты для какой-то задачи, все как в свои времена было в Delphi
>>Зачем это разделение на верстку и программирование?

Ну, вы же знаете, есть специализация. В правильно организованном проекте, у каждого своя зона ответственности. Менеджер проекта ставит задачи на дизайнера, на верстальщика, на программиста, на тестировщика и т.п.
Или может, вы хотите и можете, каждый из уровней делать самостоятельно? Хватит знаний и опыта?

>>а в масштабах компонентов

И в масштабах компонентов, речь сводится не к CSS и не к пре/пост- процессорам, а к тому — как грамотно организовать структуру проекта.
Я использую компонентную модель итак, и без всяких пре/пост- процессоров. Пишу чистый, ванильный CSS и только неймингом занимается сборщик.

>>так почему бы не писать это в одном месте

Ой — все в одном месте, это мы уже проходили. Предлагаете опять мешать все в кучу — и логику и представление? Ну, как так :)
Абсолютно согласен. Все же не реактом единым так сказать. А все что тут по напридумывали — весь этот css in js жесть полная. Пре/пост процессоров более чем достаточно для решения большинства задач становящихся перед верстальщиком — ИМХО.
И еще такой момент — вот автор статьи хоть немного думал о том как этот АД с styled-components будет использовать обычный верстальщик который придет в компанию. Да там же черт ногу сломит. А если у специалиста огромный опыт в верстке и глубинное понимание тонкостей но слабый или вообще мизерный опыт в js — для такого специалиста такой подход вообще закрыт тогда. В противовес мне могу сейчас сказать, что будут брать программиста — но я ни за что не поверю что даже самый обалденный программист будет знать верстку так же хорошо как верстальщик с большим опытом реальных проектов.

На чистом CSS писать больно хотя бы из-за двух вещей: отсутствие автопрефиксера и отсутствие переменных.

1) Если вы используете Gulp, просто берете и проходитесь по css-файлу autoprefixer`ом

2) Если вам нужны переменные, тогда используйте препроцессоры.
Мне переменные не нужны, на деле не было ни одного случая, чтобы приходилось потом брать и менять их значения…

Так и так проходиться препроцессором. Так почему бы не писать на более удобном языке? SASS/LESS/whatever? Или от того, что входным файлом гульпа будет css он стал менее препроцессорным?

если вам нравится мешанина, химера = «css+синтаксис препроцессора+многоуровневая нотация» — это дело вашего вкуса.

я предпочитаю писать на чистом css в один уровень.
открыл файл и все увидел. а не открыл файл и началось чтение зависимостей…

чем проще — тем лучше, особенно с поддержкой и дальнейшим развитием проекта.
Вопрос только в том, готовы ли вы изучать новые инструменты. А то ситуация напоминает, когда вокруг все кажется гвоздями, когда у вас css…
Спасибо за статью!
Дополнение: одним из авторов styled-components является Max Stoiber, с которым тут недавно публиковалось интервью

Статья называется "Эволюция CSS", но при этом больше половины статьи нам просто рекламируют очередной модный способ писать стили без CSS.

И еще вопрос к переводчику:
можно ли считать, что публикация перевода в блоге Mail.ru означает, что компания рекомендует такой подход и в будущем тоже планирует разрабатывать свои интерфейсы с использованием styled-components?

Не стоит рассматривать эту статью как руководство к действию, тем более как рекомендацию от Mail.Ru — у нас много команд, которые работают над разными проектами и внутри каждой из них принимается решение об использовании той или иной технологии

Спасибо за ответ!


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

А может пора остановиться, перестать изобретать новые CSS-перверсии и терпеливо подождать shadow dom? Недолго вроде осталось

Модный нынче реакт не особо дружит с shadow-dom (да и стандартами W3C в целом), вот и придумывают подобное.

Чую, переход с реакта на веб компоненты будет большой общей болью году так в 18-19
2017 год, а у людей сложность стилей в препроцессорах заканчивается на примитивном нестинге. Сколько не слежу за этим бредовым хайпом вокруг css in js, все никак не могу найти ни одного внятного примера более менее сложных стилей. Тут даже от примитивных примеров глаза вытекают, а как интересно будет выглядеть цикл по 10+ элементам, с использованием nth-child, где внутри будут использоваться миксины, «обратные» переопределения на основе классов на далеком родителе и так далее?

Ну не пользовались этим люди SASS'ом на полную катушку, ну зачем они пытаются другим впарить что вот этот франкенштейн чем то лучше, если он пока что абсолютно точно уступает по всем фронтам, когда дело доходит реальной препроцессорной css магии.
А как вы используете SASS кроме обычной вложенности и переменных? Был бы рад, если бы подсказали как улучшить свою жизнь с Sass =)
У меня получилось только небольшие условия строить для небольшого плагина.
Вот моя демка с примером — http://codepen.io/suez/pen/AXQaEg
— простые mixin'ы для оверрайда свойств на основании класса у удаленного родителя.
— множество обычных переменных с таймингами и так далее.
— scoped переменные внутри элементов и циклов для удобства.
— BEM naming с помощью &__ и подобных вещей.
— циклы с интерполяцией и подобными плюшками.

JS в демке лишь добавляет/убирает 1 класс к двум элементам.
SASS превратил CSS в приличный язык программирования
Язык программирования? Что, простите?
UFO just landed and posted this here
> что дальше

Всё это вместе в большом WASM-блобе
<div class="sky [sky--dusk / sky--daytime] [sky--foggy]">

Скобочки, слеши — это что вообще такое, следы какого-то фреймворка?
Или это автор просто в вольном стиле показал необязательные параметры?
Более 10ти лет занимаюсь фронтендом, перепробывал всякие пре/пост процессоры в итоге вернулся к CSS. Работаю в крупной компании и никто не жалуется ни на скорость ни на качество.

Не говорю, что нет приимуществ, но их мало для использования в практике.
В моём случае код пишется медленнее исли использовать пре/пост процессоры.

До последнего буду держаться за CSS. Может вы меня посчитаете древним, но мне не пришлись по дуще ни один из выше указанных вариантов.
Каждый день появляются новые способы написания стилей. Это все, конечно, круто, но есть единственный верный способ инкапсуляции CSS — это Shadow DOM. Тут все будет работать как надо, даже если виджет вставлен на сторонний сайт. Единственная проблема — поддержка браузеров.
Круто, давайте убьём клиент, слабому китайскому смартфону за 50$ будет очень весело долго обрабатывать всю эту мешанину до отрисовки страницы. Можно конечно отрендерить на ноде и отдать клиенту, но всё равно боли будет у клиента много. Такое ощущения что эти люди свято верят что у каждого их пользователя i7 + ssd + свободные гигов 16 опреативки.

Вы удивитесь, то библиотека с именем JSS уже существует: https://github.com/cssinjs/jss


И в чем-то даже лучше, чем описанное в статье

Вот сижу такой пропитываюсь знаниями и где то недрах мозга тихий голос шепчет «а ты уверен что это истинна и стоит делать так как тут написано?»
Я учусь программированию в веб (css,html,js) уже пробовал как то заниматься этим пару лет назад на уровне код в блокноте, о фреймворках, саблайме, бэм и прочих радостях узнал и начал осваиваться пару месяцев назад. Что стоит из статьи принять к сведению и пытаться учить и пользовать?
p.s. мой первый коммент на хабре, не кидайте тапками пожалуйста.
Учите постепенно, начиная с базовых вещей: CSS в частности, а вот когда вам станет его не хватать, поймете о чем речь в статье.
Те проблемы которые решаются выше — пока еще не ваши проблемы :) Иначе рискуете примкнуть к «культу карго», т.е. повторять за другими не понимая в своих действиях смысла.
Спасибо большое за совет, я вроде и сам понимаю что нужно с азов учить, но хочется то все и сразу. А как только начинаешь что то интересное читать, всякие angular.js, node.js, bootstrap, html5, websockets, и прочее прочее, это начинает засасывать, и вот ты сидишь из ушей дым и понимаешь что ничего ты не понимаешь…
Но желание разобраться и научиться все еще никуда не пропадет.
Главное не набрасываться на все технологии сразу — как правило это не способствует эффективному продвижению в конкретно выбранной интересующей ветке, скорее наоборот мешает на ней детально сосредоточиться.
Sign up to leave a comment.