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 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?
> 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.
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?
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 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.
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...
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.
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.
It always concerns me how many websites and documentation for CSS frameworks are full of simple accessibility issues, it doesn't give me much confidence in the quality of the framework.
30 comments
[ 3.1 ms ] story [ 76.8 ms ] thread> 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.
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?
There was a good thread on these a few weeks ago: https://news.ycombinator.com/item?id=23220081
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.
Agree with the rest of the stuff you've said though. I just don't see a place for this library.
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.
Setting some Booleans as attributes is much nicer. However, it is built into CSS already, so not sure a library would help...
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.
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.
It's very useful for simple projects.