5 ms·

Native HTML elements with CSS superpowers

48 points by crofrwd 6y ago

deleted 6y ago
[deleted]
giancarlostoro 6y ago
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 6y ago
  This is just a CSS framework that allows you to apply pre-baked styles by adding attributes to your HTML elements.
  - IgorPartola 6y ago
    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?
  - yoz-y 6y ago
    As opposed to using classes? What is the advantage?
    - dirtnugget 6y ago
      Not having to add classes I guess, because that is way too complicated
rbinv 6y ago
> 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?
illumanaughty 6y ago
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 6y ago
  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 6y ago
    Good! This one seems more complete and advanced.
- DoctorOW 6y ago
  It looks like it generates a classless CSS file based off settings you give it? Someone can correct me.
  - crofrwd 6y ago
    Nope, it will style native HTML elements based on CSS vars you define on the theme
    - Lammy 6y ago
      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
izietto 6y ago
What are the advantages over using data attributes instead of classes in order to style HTML elements?
- wilsonrocks 6y ago
  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.
- deleted 6y ago
  [deleted]
rsoto 6y ago
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 6y ago
  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 6y ago
    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.
  - wilsonrocks 6y ago
    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...
kroltan 6y ago
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.
syspec 6y ago
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.
rammy1234 6y ago
I think it is more to class less framework. Again like others I am not sure
dailygrind___ 6y ago
It uses attributes to target elements (ie: data-type="secondary"), which is not that different from a css-framework using classes.
F117-DK 6y ago
It seems to be a CSS reset with customizable CSS-variabels? Interesting!
- equinusocio 6y ago
  A sort of. It's a file css which add a way to easily style native HTML elements through custom properties.
dgellow 6y ago
I read the website, I don’t understand what they mean by “native”. Could someone explains what they mean and what it is?
- dirtnugget 6y ago
  Using HTML attributes instead of classes to style HTML elements
avery42 6y ago
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.
equinusocio 6y ago
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.

48 points by crofrwd 6y ago

deleted 6y ago

[deleted]

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 6y ago
This is just a CSS framework that allows you to apply pre-baked styles by adding attributes to your HTML elements.
- IgorPartola 6y ago
  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?
- yoz-y 6y ago
  As opposed to using classes? What is the advantage?
  - dirtnugget 6y ago
    Not having to add classes I guess, because that is way too complicated

rbinv 6y ago

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

illumanaughty 6y ago

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 6y ago
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 6y ago
  Good! This one seems more complete and advanced.
DoctorOW 6y ago
It looks like it generates a classless CSS file based off settings you give it? Someone can correct me.
- crofrwd 6y ago
  Nope, it will style native HTML elements based on CSS vars you define on the theme
  - Lammy 6y ago
    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

izietto 6y ago

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

wilsonrocks 6y ago
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.
deleted 6y ago
[deleted]

rsoto 6y ago

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 6y ago
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 6y ago
  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.
- wilsonrocks 6y ago
  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...

kroltan 6y ago

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.

syspec 6y ago

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.

rammy1234 6y ago

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

dailygrind___ 6y ago

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

F117-DK 6y ago

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

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

dgellow 6y ago

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

dirtnugget 6y ago
Using HTML attributes instead of classes to style HTML elements

avery42 6y ago

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.

equinusocio 6y ago

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.