Валентин Ульянов - Atomic CSS Deep Dive

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024
  • Ближайшая конференция - HolyJS 2024 Autumn, 7 ноября (online), 14-15 ноября (Санкт-Петербург + трансляция).
    Подробности и билеты: jrg.su/K18Cxd
    - -
    Скачать презентацию с сайта HolyJS - jrg.su/6y6UVL
    Доклад про подход Atomic CSS в верстке и разработку инструментов.
    Кратко вспомнили базу - почему Atomic CSS. Рассмотрели популярные решения для работы в этом подходе и сравнили их с изобретением спикера - mlut (github.com/mr1.... Разобрали проблемы известных инструментов и посмотрели, как Валентин решил их в своем. В докладе - интересные архитектурные решения, технические детали и немного хардкора.
    Для тех, кто занимается версткой, это возможность по-другому взглянуть на Atomic CSS и, возможно, взять в работу новый инструмент. А для тех, кто пишет системный код и тулинг - получить вдохновение и перенять нестандартный опыт.

ความคิดเห็น • 24

  • @ALonixG47
    @ALonixG47 4 หลายเดือนก่อน +27

    Ни дай бог на проекте такую жесть увидеть

  • @des-ext
    @des-ext 4 หลายเดือนก่อน +9

    Сами придумали проблемы, сами их решили, создав еще больше проблем.
    Зато получилась тема для доклада )

    • @MrZidan150
      @MrZidan150 4 หลายเดือนก่อน

      Если бы с написанием стилей все было легко, то не появились бы разные подходы, такие как: БЭМ, Atomic и т.д.

  • @АнтонСтасюк-е4р
    @АнтонСтасюк-е4р 4 หลายเดือนก่อน +5

    KISS вышло из чата )

  • @mulfyx
    @mulfyx 4 หลายเดือนก่อน +4

    "тратим меньше мыслетоплива" это про название сущностей в обычном css, а сколько теперь этого "топлива" будет тратиться на расшифровку этих сокращений?

    • @MrZidan150
      @MrZidan150 4 หลายเดือนก่อน

      Если с ними разобрался - минимум. Это инвестиционная история: 1 раз приложил усилия, разобрался и потом всю оставшуюся практику наслаждаешься версткой)

    • @mulfyx
      @mulfyx 4 หลายเดือนก่อน +1

      @@MrZidan150 ...в одиночку

  • @ved2590
    @ved2590 4 หลายเดือนก่อน +5

    Не хватило в конце доклада какой-то статистики, насколько быстрее стало писать код по сравнению с tailwind или еще чем. А то не ясно, зачем учить новый синтаксис чтобы что. Ускорить вёрстку на 5%, а может быть на 50 ?

    • @MrZidan150
      @MrZidan150 4 หลายเดือนก่อน

      Хорошее замечание, подумаю над этим

  • @MrZidan150
    @MrZidan150 4 หลายเดือนก่อน +1

    Всем спасибо, что не поленились оставить комменты!) Продолжение этого доклада будет на другой большой фронтенд-конференции в конце сентября. Там мы и разберемся: как правильно верстать в подходе Atomic CSS, чтобы получить заявленный эффект

    • @vladimircreator
      @vladimircreator 3 หลายเดือนก่อน +1

      Лучше не надо. Очередной велосипед да ещё и максимально неинтуитивный

  • @KopoLPedov
    @KopoLPedov 4 หลายเดือนก่อน +10

    забиваем гвозди микроскопом)

    • @daiske2867
      @daiske2867 4 หลายเดือนก่อน +2

      извольте, гвозди мы тут забиваем калькулятором.

    • @MrZidan150
      @MrZidan150 4 หลายเดือนก่อน

      Если бы с написанием стилей все было легко, то не появились бы разные подходы, такие как: БЭМ, Atomic и т.д.

    • @KopoLPedov
      @KopoLPedov 4 หลายเดือนก่อน

      @@MrZidan150 без негатива, но лучше б ты потраченное время на этот костыль инвестировал для работы в css working group. Этот инструмент не взлетит, он проклят. Я верстаю с 2011 года и могу об этом судить столь категорично.

    • @MrZidan150
      @MrZidan150 3 หลายเดือนก่อน

      @@KopoLPedov А как так получилось, что Tachyons полетели в свое время? При этом, mlut их по всем параметрам превосходит

  • @vlamai
    @vlamai 4 หลายเดือนก่อน +8

    Когда я вижу любителей так сокращать, у меня возникает только один вопрос, у вас буквы платные что ли?

    • @MrZidan150
      @MrZidan150 4 หลายเดือนก่อน

      Буквы нет, но так удобнее. Вряд ли кто-то будет спорить, что удобнее написать:
      `npm i -D mlut`, чем `npm install mlut --save-dev`
      И стоит понимать, что это инвестиционная история: 1 раз приложил усилия, разобрался в этих сокращениях, и потом всю оставшуюся практику наслаждаешься версткой)

    • @vlamai
      @vlamai 3 หลายเดือนก่อน

      @@MrZidan150 в случае npm это не надо потом читать\исправлять много раз. Я предпочту 1 раз написать и потом всегда понимать background-color чем раз в год учить новое сокращение bckclr а другой решит что надо bgc и сиди вспоминай

    • @MrZidan150
      @MrZidan150 3 หลายเดือนก่อน

      @@vlamai Именно поэтому в mlut используется алгоритм для сокращений, с которым можно однажды разобраться и выводить их (как минимум популярные) в голове, а не зазубривать. Такое "выведение", поможет его намного быстрее довести до автоматизма, и тогда оно станет как `npm i -D` или `rm -rf`

  • @Andrew_Dreamer13
    @Andrew_Dreamer13 3 หลายเดือนก่อน +1

    Я так и не понял зачем всё это надо...

  • @deonisij.online
    @deonisij.online 4 หลายเดือนก่อน +2

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

    • @MrZidan150
      @MrZidan150 4 หลายเดือนก่อน +1

      Языки программирования разные бывают. Есть Python - простой, как вы описали, а есть Erlang - посложнее) У каждого свои сильные и слабые стороны. С подходами к написанию стилей похожая ситуация
      И стоит понимать, что это инвестиционная история: 1 раз приложил усилия, разобрался в этих сокращениях и потом всю оставшуюся практику наслаждаешься версткой)