Comments 41
Жепячество какое-то о_О
Styled components — так-себе эволюция. Вторая ветка пока не зарелизилась, а в первой были порой детские проблемы: https://habrahabr.ru/company/jugru/blog/315772/#comment_9923636
Может во второй версии их решат, но всё равно, это довольно узкоспециализированное решение, которое по-большей части выглядит как костыль.
В итоге — все эти пре/пост процессоры никакого отношения к CSS не имеют, они всего лишь «организую» декларации в структуре проекта. Никакая эволюция CSS тут не значится, эволюционируют инструменты.
На мой взгляд, проблемы никакой нету, когда версткой занимается верстальщик, а программист — программированием.
А вот когда программисты занимаются версткой — вот тогда начинается весь этот зоопарк, который вместо ПРОСТОТЫ с дальнейшей поддержкой, дает лишнюю головную боль. В CSS не должно быть никаких переменных и вычислений, у него декларативная роль.
Пишите на чистом CSS, а инструментам отведите роль пространства имен и сборщика — тогда будет всем счастье…
и не нужно из CSS делать язык программирования усложняя простое!
А это разве усложнение? Зачем это разделение на верстку и программирование? Почему бы не думать не в масштабах сайта, а в масштабах компонентов, где каждый небольшой элемент пишется одним человеком, который пишет и логику, и стили, и верстку? А раз он пишет все, так почему бы не писать это в одном месте (!= в одном файле) единообразно (т.е. все в виде react-компонентов)? При этом мы получаем еще и реактивные стили.
А вот сама реализация styled-components мне не нравится, сейчас работаю над чем-то похожим, но для clojure
Ну, вы же знаете, есть специализация. В правильно организованном проекте, у каждого своя зона ответственности. Менеджер проекта ставит задачи на дизайнера, на верстальщика, на программиста, на тестировщика и т.п.
Или может, вы хотите и можете, каждый из уровней делать самостоятельно? Хватит знаний и опыта?
>>а в масштабах компонентов
И в масштабах компонентов, речь сводится не к CSS и не к пре/пост- процессорам, а к тому — как грамотно организовать структуру проекта.
Я использую компонентную модель итак, и без всяких пре/пост- процессоров. Пишу чистый, ванильный CSS и только неймингом занимается сборщик.
>>так почему бы не писать это в одном месте
Ой — все в одном месте, это мы уже проходили. Предлагаете опять мешать все в кучу — и логику и представление? Ну, как так :)
И еще такой момент — вот автор статьи хоть немного думал о том как этот АД с styled-components будет использовать обычный верстальщик который придет в компанию. Да там же черт ногу сломит. А если у специалиста огромный опыт в верстке и глубинное понимание тонкостей но слабый или вообще мизерный опыт в js — для такого специалиста такой подход вообще закрыт тогда. В противовес мне могу сейчас сказать, что будут брать программиста — но я ни за что не поверю что даже самый обалденный программист будет знать верстку так же хорошо как верстальщик с большим опытом реальных проектов.
На чистом CSS писать больно хотя бы из-за двух вещей: отсутствие автопрефиксера и отсутствие переменных.
2) Если вам нужны переменные, тогда используйте препроцессоры.
Мне переменные не нужны, на деле не было ни одного случая, чтобы приходилось потом брать и менять их значения…
Так и так проходиться препроцессором. Так почему бы не писать на более удобном языке? SASS/LESS/whatever? Или от того, что входным файлом гульпа будет css он стал менее препроцессорным?
я предпочитаю писать на чистом css в один уровень.
открыл файл и все увидел. а не открыл файл и началось чтение зависимостей…
чем проще — тем лучше, особенно с поддержкой и дальнейшим развитием проекта.
Autoprefixer на этапе компиляции работает?
Если нет, тогда CSS-Modules на голову выше.
Дополнение: одним из авторов styled-components является Max Stoiber, с которым тут недавно публиковалось интервью
Статья называется "Эволюция CSS", но при этом больше половины статьи нам просто рекламируют очередной модный способ писать стили без CSS.
И еще вопрос к переводчику:
можно ли считать, что публикация перевода в блоге Mail.ru означает, что компания рекомендует такой подход и в будущем тоже планирует разрабатывать свои интерфейсы с использованием styled-components?
Ну не пользовались этим люди SASS'ом на полную катушку, ну зачем они пытаются другим впарить что вот этот франкенштейн чем то лучше, если он пока что абсолютно точно уступает по всем фронтам, когда дело доходит реальной препроцессорной css магии.
У меня получилось только небольшие условия строить для небольшого плагина.
— простые mixin'ы для оверрайда свойств на основании класса у удаленного родителя.
— множество обычных переменных с таймингами и так далее.
— scoped переменные внутри элементов и циклов для удобства.
— BEM naming с помощью &__ и подобных вещей.
— циклы с интерполяцией и подобными плюшками.
JS в демке лишь добавляет/убирает 1 класс к двум элементам.
SASS превратил CSS в приличный язык программирования
Язык программирования? Что, простите?
<div class="sky [sky--dusk / sky--daytime] [sky--foggy]">
Скобочки, слеши — это что вообще такое, следы какого-то фреймворка?
Или это автор просто в вольном стиле показал необязательные параметры?
Не говорю, что нет приимуществ, но их мало для использования в практике.
В моём случае код пишется медленнее исли использовать пре/пост процессоры.
До последнего буду держаться за CSS. Может вы меня посчитаете древним, но мне не пришлись по дуще ни один из выше указанных вариантов.
Какой-то совсем JSS получился.
Вы удивитесь, то библиотека с именем JSS уже существует: https://github.com/cssinjs/jss
И в чем-то даже лучше, чем описанное в статье
Я учусь программированию в веб (css,html,js) уже пробовал как то заниматься этим пару лет назад на уровне код в блокноте, о фреймворках, саблайме, бэм и прочих радостях узнал и начал осваиваться пару месяцев назад. Что стоит из статьи принять к сведению и пытаться учить и пользовать?
p.s. мой первый коммент на хабре, не кидайте тапками пожалуйста.
Те проблемы которые решаются выше — пока еще не ваши проблемы :) Иначе рискуете примкнуть к «культу карго», т.е. повторять за другими не понимая в своих действиях смысла.
Но желание разобраться и научиться все еще никуда не пропадет.
Эволюция CSS: от CSS, SASS, BEM и CSS–модулей до styled-components