Strong naming convention

❌ Tailwindcss:

• .justify-*: content, items or self?
• .flex => display: flex, but .flex-auto => flex: 1 1 auto;
• .bg-none - reset all background? Nope, only background-image

❌ Tachyons:

• .br-0 => border-right-width: 0, but .br1 => border-radius:.125rem
• .normal: line-height, font-weight or letter-spacing?
• .b: bottom, border or display: block? Nope, it is font-weight:bold!

✅ mlut:

• .Jc-c => justify-content: center, .Js-c => justify-self: center
• .Bdr => border-right: 1px solid, .Bdrd1 => border-radius: 1px

One algorithm for all. If you know CSS, you almost know mlut.

Almost arbitrary by design

• values: .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: 90rem) {...}

Great ergonomics

Shorter class names:

<!-- Tailwindcss -->
<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>

Convenient syntax for complex values, states and at-rules. It is like Vim for CSS.

❌ 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 } }

Handy extension

Add utilities, states and custom at-rules with few lines of code

@use 'mlut' as ml with (
  // add utilities
  $utils-data: (
    'utils': (
      'registry': (
        'Mil': margin-inline,
        'Ir': (
          'properties': image-rendering,
          'keywords': (
            'p': pixelated,
          ),
        ),
      ),
    ),
  ),

  // add states
  $utils-config: (
    'states': (
      'custom': (
        'are': '[aria-expanded=“true”]',
      ),
    ),
  ),
);

@include ml.apply('Mil-15_-are Ir-p');

// CSS

.Mil-15_-are[aria-expanded=“true”] {
  margin-inline: -15px;
}

.Ir-p {
  image-rendering: pixelated;
}

And also...

• 💅️ Written in Sass and includes all its benefits
• ⚡ JIT (on-demand) and AOT mods are available
• 🔧 Fully customizable: change tokens, utilities names and any settings
• ✨ Easy to integrate in existing project. No name collisions with your CSS in the most projects. Increasing specificity in one line or for one utility.

Structure

• Sass tools
• opt-in CSS library
• Sass addons
• JIT engine

Library

The library part of toolkit consists of:

• base styles - variables and generic CSS like reset, normalize etc.
• helpers - similar to utilities: the same universal, but more complex and can consist of several CSS rules

The library is modular and you can include only what you need

Tools

Sass tools include:

• settings based on which the everything works
• mixins and functions with which you can generate utilities and write styles

Addons

Addons may contains any tools, settings and styles. Addons now at the preview stage and in the future be moved to separate packages

Articles

• Atomic CSS Deep Dive: EN, RU
• mlut - a new word in the Utility-First CSS approach
• How to make one plugin for all frontend bundlers at once: RU
• Interactive lesson: EN, RU

What next?

• ability to run in a browser
• first-class pseudoselectors with arguments like has()
• performance optimization
• plugins for editors and IDEs with hints and autocompletion
• and much more!

Acknowledgement

• CSS
• Emmet
• ACSS
• Tailwind CSS
• Tachyons