Native HTML elements with CSS superpowers | Hacker News Reader

Native HTML elements with CSS superpowers

native-elements.dev

48 pointscrofrwd27 comments

The homepage tells you nothing about what this is. Even if I go to the GitHub I get "Native Elements (NE) is not a CSS framework"...great so what is it?

As far as I can tell, it's a class-less css framework

There was a good thread on these a few weeks ago: https://news.ycombinator.com/item?id=23220081

Good! This one seems more complete and advanced.

It looks like it generates a classless CSS file based off settings you give it? Someone can correct me.

Nope, it will style native HTML elements based on CSS vars you define on the theme

Isn’t that what the parent means by ‘classless’? As in it only generates styles for all instances of particular elements instead of classifying them like ‘div.my-special-div’ or whatever

I think a lot of the pushback against this library, is in how it is marketing itself.

On the homepage, you cannot tell what it is (i clicked around as well, still no idea). It looks like it is a CSS framework, but it claims it is not without clarifying what it is.

For many engineers, myself included, that ticks all the wrong boxes thus making it under deliver if it is not the greatest thing since slice bread.

> You can consider it as a customizable plug-n-play library for your site which helps you easily styling all the available HTML elements using CSS custom properties, classes, attributes, or whatever you want in less than 7 kB

But I can do that already with 0 B overhead. The other features mentioned (customization, theming) can be had with pre-processors like SASS.

What exactly new/different does this offer?

I read the whole documentation and I have absolutely no idea what this is, besides something about CSS?

The best information there is is by going to the last two tabs in its Theme Builder, which makes me think this is some sort of CSS framework. But the GitHub boldly denies that, so I have no idea.

Isn't it slower querying elements via attributes?

Whenever I find a «brand» new way to work with CSS (or whatever they wanted to call it), I'm skeptical. Most of the times they just redo what IDs and classes were made for, but way worse. While this might have good intentions in mind, it's just adding classes via attributes.

Also it's explained very badly, I had to click three buttons in order to get examples.

It used to be. In modern engines it's really no longer the case. Just did a mini test running both attr and class name selectors on 10000 objects. In both instances the paint was fully complete in a single frame.

Agree with the rest of the stuff you've said though. I just don't see a place for this library.

I mean you are right, but there are certainly selectors which are "faster" just the faster part is more on the 0.000001ms level than any measurable level.

Also I am fairly certain (been a while since I spent time in Webkit source) but class name and attribute selectors are implemented the same, if you want to do a proper benchmark you would want to do id, nested selectors, attributes, class, etc. And at that level you will find a significant difference.

I could see the point in attribute selectors - when using react I find it messy to programmatically specify class names based on state/props, particularly when using BEM.

Setting some Booleans as attributes is much nicer. However, it is built into CSS already, so not sure a library would help...

From the website because I was wondering if this was some ReactNative alternative or what they meant by native HTML elements:

> Native Elements (NE) is not a CSS framework, no bundlers required or tons of configurations to set. You can consider it as a customizable plug-n-play library for your site which helps you easily styling all the available HTML elements using CSS custom properties, classes, attributes, or whatever you want in less than 7 kB. You can also build your class-based CSS framework on top of it.

Seems interesting, but as a common web developer not uber ahead on next gen stuff they could really put more examples in the homepage outside of just a gif. My best guess is this allows you to create new HTML elements that have some default properties, which sounds nice enough. I heard the browser was coming out with this capability or related in the future, I always forget what they're calling it next but I'm still waiting on that, unless this builds on that?

> This library is built using modern CSS feature and best practices, the compiled version supports only the latest two Chrome, Safari, Firefox, and Edge versions and this is possible thanks to Browserslist

I'm all for us all collectively taking out legacy browsers and forcing grumpy IT guys who are going to get their orgs hacked to finally upgrade, but which features? These details are useful to know.

This is just a CSS framework that allows you to apply pre-baked styles by adding attributes to your HTML elements.

As opposed to using classes? What is the advantage?

Not having to add classes I guess, because that is way too complicated

This is the most concise explanation of what this project is. Why couldn’t the author save themselves the trouble of all that write up and just use that one sentence?

What are the advantages over using data attributes instead of classes in order to style HTML elements?

I think where you have several Boolean states an element could be in, it can be nicer that programatically constructing a string with the required classmates in.

I think it is more to class less framework. Again like others I am not sure

It seems to be a CSS reset with customizable CSS-variabels? Interesting!

A sort of. It's a file css which add a way to easily style native HTML elements through custom properties.

It seems that the homepage has been updated! Also, they released a new version that reduces the filesize to < 6kb.

It's very useful for simple projects.

It uses attributes to target elements (ie: data-type="secondary"), which is not that different from a css-framework using classes.

I read the website, I don’t understand what they mean by “native”. Could someone explains what they mean and what it is?

Using HTML attributes instead of classes to style HTML elements

Reply on news.ycombinator.com