
Native HTML elements with CSS superpowers - crofrwd
https://native-elements.dev/
======
illumanaughty
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?

~~~
sumnole
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](https://news.ycombinator.com/item?id=23220081)

~~~
equinusocio
Good! This one seems more complete and advanced.

------
syspec
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.

------
rbinv
> 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?

------
kroltan
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.

------
rsoto
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.

~~~
jjcm
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.

~~~
dubcanada
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.

------
giancarlostoro
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.

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

~~~
yoz-y
As opposed to using classes? What is the advantage?

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

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

~~~
wilsonrocks
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.

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

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

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

------
equinusocio
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.

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

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

~~~
dirtnugget
Using HTML attributes instead of classes to style HTML elements

