Why would anybody want to use property:value syntax

  1. Because you don't have to study anything. It's like CSS instead of randomly named somehow shortened classes. An example: auto-cols-auto is a class from Tailwind. The class is not self-explanatory and a dev not using Tailwind daily has to go into the docs or into the dev tools to see what it does. In Stylify you write this grid-auto-columns:auto. Everyone with a bit of knowledge of CSS knows what that does.
  2. Another reason is maintainability. What if browsers come with a property, Tailwind already shortened? An example shrink => flex-shrink: 1; (class from Tailwind). The browsers come with, for example, a new shrink: auto. Then they will have to figure out a new name for the new selector so it makes sense. Which can be confusing.
  3. When using BEM you can end up with
    . I can't see how property:value selectors are more bad then this.

Sure, Stylify syntax might not be for anyone. You can however define custom macros for having classes like ml-2 or py-3 if you like it more. It's just a Native Preset that you can ignore and define a custom set.

Do I need to use hardcoded values?

  • In Stylify, you can configure variables and use them anywhere.
  • It's just up to developer if he is going to have hardcoded values in the code or not.

Why not to put the style directly into the HTML style="" attribute

  • For example a selector like color:red is generated as .color\:red{color:red}. This selector can be reused.
  • When you add a component in Stylify like .button that needs red text, it is generated like this .color\:red,.button{color:red}. The selector is simply attached, reused and the property:value not generated again => This means smaller bundles
  • In production, you can also minify this selectors to => ._zs,_zx{color:red}. This is done even by Medium.com and Facebook.
  • But the minification will make the blocks harder to find when debugging because of the unreadable classes? No. You can use empty class as selector, data or id attributes. Also, in Javascript we normally minify classes and selectors from const myValue to const zx and nobody cares.

What are the advantages over pure CSS

  • Selectors are dynamically generated => don't have to remember to remove them when removing css and vice versa
  • Selectors are combined and reused => .color\:red,.button{color:red}
  • Selectors are minified from long text-align:left to short _zx
  • You open a template file and a browser and you just type the selectors. You don't have to switch between html and css for removing, renaming, and manually combining classes
  • The CSS size doesn't grow exponencialy, because there is a minimum of duplicated css property:value. There is some article about CSS size from Facebook
  • When frontend and backend engineers work on one task, then it's easy for the frontend engineer to tell the backend engineer which classes to add when he just needs to indent or align something. He doesn't have to edit CSS and hopes it will work. He just copies selectors.
  • Dynamically generated CSS means less files in the projects => less changes => we normally generate cache, entities, migrations, js bundles and etc. So Stylify dynamically generates CSS. At least from my point of view it's more comfortable and efficient then writting it manually and think about how to pregenerate utilities or combine css files manually.

Stylify and utility-first CSS causes bloated templates and worse maintainability

  • You can define components. So there doesn't have to be any utility in the template.
  • From experience, you can bloat your templates by a lot of other stuff => conditions, attributes, dynamic attributes, dynamically loaded templates and etc. Blaming CSS selectors is simply wierd.