#css only library to apply color filters.

Features:
- Only CSS. No JavaScript!
- ~1KB minified and gzipped!
- Supports all modern browsers
- Built with SCSS.
- Hover support.

https://github.com/bansal/filters.css

A case study on viable techniques for vanilla web development.

A TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 44KB (unminified).

More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (100% faster loads and 90% less bandwidth in this case).

There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication (most of which may be mitigated by ES6).

To produce valid vanilla solutions, and because constraints spark creativity, I came up with a set of rules to follow throughout the process:

- Only use standard web technologies.
- Only use widely supported JS features unless they can be polyfilled (1).
- No runtime JS dependencies (except polyfills).
- No build steps.
- No general-purpose utility functions related to the DOM/UI (2).

If anything, the case study validates the value of build steps and frameworks, but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is clearly inferior (especially in browser testing).

https://github.com/morris/vanilla-todo

TLDR: this is totally possible: the result app is very small, fast, and portable.

#js #css

mlut - новое слово в подходе Atomic CSS

mlut (читается как млат) - это инструмент для верстки в подходе Atomic #css, с которым можно создавать стили любой сложности. Что-то похожее на Tailwind, но по некоторым параметрам превосходит все популярные аналоги.

Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядит в коде это примерно так:

<button class="D-ib P1r Bgc-blue_h">
  Submit
</button>

.D-ib {
  display: inline-block;
}

.P1r {
  padding: 1rem;
}

.Bgc-blue_h:hover {
  background-color: blue;
}

Преимущества такого подхода

1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, Ruby, Clojure, etc

Возвращаясь к mlut, вот чем он отличается от конкурентов

Строгий нейминг

Tailwind:
- flex => display: flex, но flex-auto => flex: 1 1 auto
- tracking-wide => letter-spacing: 0.025em
- justify-* => content, items, self?

mlut:
- Js-c => justify-self: center
- Bdr => border-right: 1px solid
- Bdrd1 => border-radius: 1px

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

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

Почти произвольные значения by design

- значения утилит: Ml-1/7 =>

margin-left: -14.3%

- states: Bgc-red200_h,f =>

.Bgc-red200_h\,f:hover,
.Bgc-red200_h\,f:focus {
  /* ... */
}

- at-rules: @:p-c,w>=80r_D-f =>

@media (pointer: coarse), (min-width: 80rem) {
  /* ... */
}

Хорошая эргономика

Более короткие className:

<!-- Tailwind -->
<div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--cardBg)"></div>

<!-- mlut -->
<div class="Ps B-1 Gc1/-1 Gcs1 Grs2 H1 Bgc-$cardBg"></div>

Удобный синтаксис для сложных утилит

Tailwindcss:
- [@media(any-hover:hover){&:hover}]:opacity-100
- text-[length:var(--myVar,1.3rem)]
- supports-[margin:1svw]:ml-[1svw]

mlut:
- @:ah_O1_h =>

@media (any-hover) {
  .\@\:ah_O1_h:hover {
    opacity: 1
  }
}

- Fns-$myVar?1.3 =>

font-size: var(--ml-myVar, 1.3rem);

- @s_Ml1svw =>

@supports (margin-left: 1svw) {
  .\@s_Ml1svw {
    margin-left: 1svw
  }
}

Удобно расширять

Утилиты, states и кастомные at-rules добавляются парой строк кода

@use 'mlut' with (
  $utils-data: (
    'utils': (
      'registry': (
        'Mil': margin-inline,
      ),
    ),
  ),
);

@include mlut.apply('Mil-13');

// CSS

.Mil-13 {
  margin-inline: -13px;
}

Чем еще может похвастаться mlut

- Написан на Sass, все плюсы которого идут в комплекте
- Доступен как JIT (on demand), так и AOT режим работы
- Отличная кастомизация

Состояние проекта

Что реализовано на сегодня:

- Генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- Плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- Документация
- Интерактивный мини-курс по инструменту совместно с HTML Academy
- Больше технических деталей есть в расшифровке доклада с HolyJS.

Автор будет благодарен любому фидбеку и особенно звездам на гитхабе!