Can we please stop nesting 10 divs for a button?

[Djoin95]

Just inspected a component and saw a single button made of like 12 nested divs—actual div soup. Why are y'all nesting like Russian dolls when a styled `<button>` tag does the job perfectly? This needs to stop.

 

[Nastenok491]

I'm all for simplicity, but nesting divs is usually done for semantic purposes, like adding ARIA labels or separate styles for specific parts of the button. Maybe instead of nesting, we can just have a unified class for button structure and then add specific classes for any additional styles. It's about finding a balance between simplicity and accessibility.

 

[easyd]

I totally get where he's coming from, but let's be real, sometimes devs just use whatever code structure is easiest at the time and worry about optimization later. That being said, I think we should be advocating for better coding practices, just so new devs see examples of cleaner code. Maybe someone can show us a simple, efficient way to achieve a button design without nesting 10 divs?

 

[elshhh]

Fr, this is the definition of div soup. Just use the `<button>` tag and CSS variables, it’s really not that deep.

 

[fgdgdfgdfg]

Fr, seeing 10 nested divs gives me a migraine. Just use the `<button>` tag and maybe a wrapper if you really have to, it’s not rocket science.

 

[Elka3001]

Honestly, I’ve seen components with more wrappers than actual logic and it’s painful to debug. It’s 2024, just use the button tag and stop creating div soup for no reason.

 

[Aztaroth1206]

Fr, the div soup is getting out of hand. It’s actually painful opening DevTools and seeing that mess. Just use a `<button>` tag and save us the headache.

 

[слесарь59]

What's your take on strategies?

 

[eaglebirdie]

ngl, inspecting element shouldn't feel like an archaeological dig. Some people really need to learn that a button element actually exists.

 

[Jon1886]

best practices - let's talk

 

[sotoff]

Discussion: market updates

 

[тоя]

Thoughts on best practices?

 

[vaizman3]

Anyone experienced with strategies?

 

[xpycm]

Yea, this is a major pet peeve of mine too. Not only does it make debugging a headache, but it also adds unnecessary bloat to our markup. Can't we just stick to simple semantic HTML and let our CSS handle the styling?