Frequently Asked Questions

• 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.
• Another reason is maintainability. What if browsers come with a property, Tailwind already shortened? An example shrink => flex-shrink: 1; (class from Tailwind). What if 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.
• When using BEM you can end up with class="page-section__container page-section__container--full-size page-section__container--without-background". I can't see how property:value selectors are worse than this.

In case you don't like the CSS-like selectors, you can define custom macros like ml-2 (margin-left) or py-3 (vertical padding) if you like it more.

• For example a selector like color:red is generated as .color:red{color:red}. This selector can be reused.
• Inline styles are not responsive. You cannot add a @media query. This means, you cannot have font-size 12px for mobile and then change it for a desktop. Also, it is easier to toggle classes than a style attribute value.
• 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 is not generated again => This means smaller bundles.
• In production, you can also minify this selectors to => .a,.b {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 the empty class as selector, data or id attributes. Also, in Javascript, we normally minify classes and selectors from const myValue to const abc and nobody cares.

• 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 a.
• 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 exponentially, 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 fewer files in the projects => fewer 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 than writing it manually and thinking about how to pre-generate utilities or combine CSS files manually.

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

• You can define components. So there doesn't have to be any utility in the template.
• There is also the possibility to style custom selectors. This way you can eliminate a lot of repeating utilities.
• From experience, you can bloat your templates with a lot of other stuff => conditions, attributes, dynamic attributes, dynamically loaded templates, etc. Blaming CSS selectors is simply wierd.

• No. Stylify generates everything on demand.
• If you write color:blue, it will generate .color:blue {}. If you remove it, it will not be generated.
• Components work in the same way.
• Only custom selectors are generated immediately because it cannot be detected if they are defined or not.

• This character is the most "visually similar" to space.
• Stylify cannot use spaces in selectors as they are further optimized. Matching selectors with space would be unnecessary difficult and could cause a lot bugs and edge cases that would be hard to solve.
• The dash - character also cannot be used as in CSS, there are negative values like calc(100% - 24px), functions like cubic-bezier or properties for animation ease-in-auto.
  Also to keep things simple and united, the character must be compatible with custom selectors like [&_a]{color:red} where the data-attribute can be defined.

• Classes are a native way for devs to use reusable selectors.
• Class attribute has native js API for add, remove, toggle.
• Attributes like x-style are not valid attributes. The only possible way here would be using data-* attribute
• Stylify doesn't use space for selector because it needs the selector to be complete for further optimization like chaining a button to padding:4px_8px and mangling .padding:4px_8px => .a

• Stylify CSS is not a CSS framework. It is a library that generates CSS for your web project dynamically based on what you write.
• Stylify CSS uses CSS-like syntax and has no pre-arranged color palettes, sizes, random shortcuts and etc.
• It's focused on quick and seamless coding without having to learn CSS framework features and random shortcuts. That is one of the reasons, why the syntax is similar to the CSS.