UPD: About div vs button.
Originally styled-components as a library appeared in 2016. The idea was proposed by Glen Maddern. It is CSS-in-JS solut...
For further actions, you may consider blocking this person and/or reporting abuse
After reaching your example with the DIV creating a button I stopped and the whole article rendered useless.
Why don't you use a button? How could I tell that the rest of the article is correct when you propose such a terrible code?
In cases like this I wish for a page with peer review, not the possibility for everyone publishing and telling the newbies to write bad code.
Here is The button for you.
If you DO know that your code is wrong, why not write it good in the first place? This site is about learning and teaching. Teach good code not wrong code.
What is the difference between
<div role="button" tabindex="0">and<button>?There is a huge difference. First of all, a DIV is a meaningless construct. Even those two attributes will not mimic all the built-in functions, a button has. A button comes with multiple functions and abilities, that you must rebuild with JavaScript, if you don't use a button-element.
There is a great article on smashingmagazine: smashingmagazine.com/2019/02/butto...
One of the first rules of frontend-development is to use the thing that is supposed to be used. So if you need a button and don't use one, you are not lazy, because you would have to care for many things, but you don't have enough knowledge. Because using a div or span instead of a button is nothing more than bad craftsmanship. But with a little more caring for the details this will be fine. Just don't believe, that only JS is important and HTML and CSS aren't necessary.
If you use semantic HTML in the way it was meant you are free of many unneccessary thoughst regarding JS-workarounds. And writing
<button type="button">is easier and faster than<div class="button" role="button" tabindex="0">and all the supporting JS.But the most important take-away for you should be to read the smashingmagazine-article. Please do!
So no difference you say. You wrote that long message and didn't make one (at least one) simple example that would explain the difference.
Strong opinion weakly held.
I think your version would be 10000 times faster than SC. Honestly - SC has a huge runtime cost, which is not measurable on small Apps, or Components, but would strike you later.
Remember the performance path SC has went - they were terrible slow in v1, even slower in v2, become 10 times faster since then, and double that speed at v4. There is almost no room for improvement, and it still 10-100(!) times slower than "pure CSS".
If you want SC-like CSS-in-JS - linaria should be your friend.
If you value customer experience over DX - go BEM way.
It depends on use case
necolas.github.io/react-native-web...