Ask HN: Is there a class agnostic CSS framework? | Hacker News Reader

Ask HN: Is there a class agnostic CSS framework?

4 pointssuperasn5 comments

Just wondering if anyone know of a CSS framework which is not heavily dependent on the it's own custom classes and tags (e.g. col-md-5, panel-heading, class="column", etc).

I mean if you can just write simple HTML tags and it somehow turns into into a nice layout, condition being no custom classes. This way it will be easy to interchange it with another framework and also not learn new classes, etc.

Is it at all possible to create grids and cards and panel with just HTML only and apply the CSS just based on tags?

View on HN

Nobody does it, because your "simple HTML tags" are actually very hard to write useful CSS code for. Without classes or IDs, the CSS framework can only write rules that are good for any possible usage of a tag, i.e. it atrophies into uselessness.

For example, are you going to nest DIV elements in your page? How deep? with what parents and children? For what purpose? I'd be surprised if the CSS framework could find a selector for some DIV elements that can have margins and paddings safely assigned without breaking in some perfectly reasonable case.

Another example: what P elements should be styled the same or styled differently? Is all text inside a P element to begin with?

And finally, there are elements that for practical purposes only make sense with classes, like SPAN.

If you don't like adapting to a CSS framework's classes, you are unlikely to adapt to the constraints and assumptions of a CSS framework that decides how can you use HTML elements or not.

Framework-prescribed classes are, at least, optional: you can use the same element without the framework classes and the framework will leave them alone.

I guess you're right. Never thought about the nested Divs.

Anyway but for things like Form elements, Cards, Panels wherr the classes remain same but each Css framework has its own set of classes, i was wondering if it makes sense to have a fixed set of tags like <panel>, <card>, <col>, etc and then we can have a transpiler that coverts those tags to Bootstrap panel or a bulma or uikit, etc panel.. Just like we transpile Sass into css.

If you are going to write simplified markup in some DSL that adapts HTML to the needs of your pages and a translator to turn it into complete markup with all the classes and utility HTML elements needed for CSS styling, there's no reason to avoid the target CSS framework conventions, including classes, in the output, and there's no place for CSS in the input because it is abstract (it should represent document structure only, e.g. a "panel", without bothering with styling, e.g. turning a "panel" into two levels of DIV and IMG elements with certain classes).

Flexbox is meant to bring responsive grids to the browsers without an extra CSS framework. Supported by the latest versions https://caniuse.com/#feat=flexbox https://philipwalton.github.io/solved-by-flexbox/

I am not aware of any "frameworks" for this. However, the bulk of your CSS can be classless. The really tricky part is grids. You will in all likelihood have to use classes for that.

Reply on news.ycombinator.com