Tailwind: style your site without writing any CSS

Re:Tailwind: style your site without writing any CSS by judofyr on Friday November 02, 2018 @11:05AM (#18363528)

It's an awful amount of characters once you multiply it. For instance, the first example (https://tailwindcss.com/docs/what-is-tailwind/) would be twice as big:

    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0"

    <img class="block height-16 small:height-24 rounded-full margin-horizontal-auto margin-bottom-4 small:margin-bottom-0 small:margin-right-4 small:margin-left-0"

After spending more than, say, two hours with Tailwind you'll probably read the first line much faster than second one (since there's less to read and you don't need to scroll). Humans are very good at pattern recognition, and you'll quickly read "mb" as a symbol in itself and not as "m[argin] b[ottom]".

> I can't believe that mnemonic based languages are easier and more readable than something closer to a natural language.

Well, it's worked out pretty well in mathematics. This is not about file size at all. It's about defining an "alphabet" of common concepts.

[ Parent | on HN ]

Re:Tailwind: style your site without writing any CSS by Isofarro on Friday November 02, 2018 @11:41AM (#18363803)

Ah, I see your issue: you do know you can have whitespace inside attributes? You don't have to clump all the class names on one line. Scanning vertically is quicker than through the horizontal line-noise of both your examples.

    <img class="
        block
        height-16
        small:height-24
        rounded-full
        margin-horizontal-auto
        margin-bottom-4
        small:margin-bottom-0
        small:margin-right-4
        small:margin-left-0
    ">

This also has the benefit too, that if you use version control line-based diffs to see what's changed, it will highlight the specific css class name that changed. Handy if you need to ensure that whenever you change the bottom margin, you can see at a glance whether the small prefixed one has been updated too.

On the other hand if you regularly need that many classes to style an element, perhaps it's a good place to refactor commonly occurring class names into a set, and label that set with a meaningful identifier.

As for mathematical notation, it's about as understandable to me as my understanding of Hanzi.

[ Parent | on HN ]