5 ms·

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML h

> The trick with CSS is to write semantic HTML and avoid div, span and css classes This experiment has failed though. CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. No large website today works otherwise. HTML is still semantic when it contains styling markup (in the sense that a computer can read and understand the structured data from it) so I'm unclear what benefit is being missed out on. Whether you call a class "home-cta-subheading" or "text-center" so you can apply some styles doesn't make a difference to screen readers, browsers or search crawlers either.

meerita 5y ago
Exactly. Also you rely on the development criteria and developers switch jobs and they have different mindsets for architecture. The CSS ends with a soap of architectures and technical debt.
jolux 5y ago
I believe there are accessibility problems with using divs and spans where a more semantic element would suffice.
- seanwilson 5y ago
  Yes, you should always be using the elements/tags with the most semantic meaning you can. When you need to add divs, spans and classes for styling reasons though, they're going to be ignored by screen readers so there's no problem here.
  - jolux 5y ago
    Yeah, I guess my concern is that a lot of developers don’t really seem to understand the difference between semantics and style.
z3t4 5y ago
The example on the Tailwind front page is pretty good semantic wise. Here's my version: <figure> <img src="/sarah-dayan.jpg"> <blockquote>“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</blockquote> <figcaption><b>Sarah Dayan</b>Staff Engineer, Algolia</figcaption> </figure>
- seanwilson 5y ago
  Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line break before the company name? And make the word "tiny" use a small font? And if you need to modify the HTML, were the extra tags added 100% only for semantic reasons and not for presentation reasons?
  - Yzupnick 5y ago
    I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/ https://jsfiddle.net/mwabc719/ Anyone have good advice on a better way?
    - mgkimsal 5y ago
      You modified the HTML. And... I didn't see the output described in the parent in your fiddle. ?
    - chrisseaton 5y ago
      > without modifying the HTML > Here is how I approached this challenge ...but you modified the HTML?
      - dragonwriter 5y ago
        > ...but you modified the HTML? The original challenge includes questions that apply only if the resolution involves HTML modifications, which (contrary to the earlier text viewed in isolation) indicates that such modifications are not invalid in response to the challenge.
Toutouxc 5y ago
> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling Totally this. We say we've come a long way from using tables for layout, but for example you still can't use Flexbox without at least some non-semantic .stuff-container and .radio-with-label junk. Decoupled HTML and CSS have failed in the real world, outside of pet projects.
- nsonha 5y ago
  I think grid is that powerful
freebreakfast 5y ago
> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. Can you provide an example? I've never found this to be the case, particularly with modern CSS. Happy to be wrong though.
- andkon 5y ago
  You've never put a number of elements together in a div, and added a class and styles to that div rather than each individual element? You should try it out.
  - freebreakfast 5y ago
    I do so for semantics. I don't do it for style.
  - iovrthoughtthis 5y ago
    nice, now your aesthetic is coupled to your information hierarchy style is orthogonal to semantics
- seanwilson 5y ago
  Take a look at the https://tailwindcss.com/ https://tailwindcss.com/ page and search for "div". Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox), to target content for styling (e.g. putting a div around the name of the author to make it blue when you otherwise wouldn't tag it) and to get around CSS quirks (search for "wrapper div" for examples).
  - freebreakfast 5y ago
    The discussion is not about the semantic expressiveness of HTML. There are certainly limitations, but these are limitations of HTML. The discussion is about whether or not "tag soup" (excessive HTML elements) is necessary for styling with modern CSS. I cannot think of an example of where it is. > Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? I looked at on the first four examples, but my responses are yes and yes. Take the figure example. The first div, which groups blockquote and figcaption, is extraneous and unnecessary for the end styling result. The second div is not extraneous because it exists for a purpose. The purpose of the second div is to place emphasis on the name or make it stand out. Thus, it should be changed to em. The third div is extraneous. With the HTML in place, grid it up. You have the container (figure) with two columns and two rows. The image sits in the first column spanning both rows. The blockquote sits in the second column on the first row. The figcaption sits in the bottom right-hand corner. Then tweak to get your img and other parts as desired (e.g., width, spacing, font-size, etc.). > You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox) ... to get around CSS quirks (search for "wrapper div" for examples). Sometimes flexbox is the wrong tool. Sometimes floats are better. Sometimes grid is better. If you find yourself reaching for extra HTML elements first, you should stop and re-evaluate whether your approach to achieving that layout is appropriate. On quirks, my experience is that "quirks" are rarely actual quirks. They are usually a limited understanding of HTML and CSS.
tomcooks 5y ago
Not eparating concerns also fails VERY hard, but that bites you in the arse when you least expect or want it (unlike writing good CSS which takes only patience and studying). There's a reason why inline styles and important! were to be avoided
- iovrthoughtthis 5y ago
  how are they separated though? if your css rules apply based on hierarchy they are incredibly tightly coupled to your html. separate files != separate concerns
rendall 5y ago
> "CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs..." This is untrue by any measure. This might have been true in the days before flex or grid, but with those additions, there is no need for extraneous styling divs. > "...and classes that are only there for styling." That part is confusing. Classes? As in CSS classes? CSS has no other purpose than styling.

meerita 5y ago

Exactly. Also you rely on the development criteria and developers switch jobs and they have different mindsets for architecture. The CSS ends with a soap of architectures and technical debt.

jolux 5y ago

I believe there are accessibility problems with using divs and spans where a more semantic element would suffice.

seanwilson 5y ago
Yes, you should always be using the elements/tags with the most semantic meaning you can. When you need to add divs, spans and classes for styling reasons though, they're going to be ignored by screen readers so there's no problem here.
- jolux 5y ago
  Yeah, I guess my concern is that a lot of developers don’t really seem to understand the difference between semantics and style.

z3t4 5y ago

The example on the Tailwind front page is pretty good semantic wise. Here's my version: <figure> <img src="/sarah-dayan.jpg"> <blockquote>“Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to customize, adapts to any design, and the build size is tiny.”</blockquote> <figcaption><b>Sarah Dayan</b>Staff Engineer, Algolia</figcaption> </figure>

seanwilson 5y ago
Now without modifying the HTML, how would I get the author's name only to appear on the right of the author image with the other text underneath? And add a line break before the company name? And make the word "tiny" use a small font? And if you need to modify the HTML, were the extra tags added 100% only for semantic reasons and not for presentation reasons?
- Yzupnick 5y ago
  I often have trouble writing CSS. Here is how I approached this challenge. https://jsfiddle.net/mwabc719/ https://jsfiddle.net/mwabc719/ Anyone have good advice on a better way?
  - mgkimsal 5y ago
    You modified the HTML. And... I didn't see the output described in the parent in your fiddle. ?
  - chrisseaton 5y ago
    > without modifying the HTML > Here is how I approached this challenge ...but you modified the HTML?
    - dragonwriter 5y ago
      > ...but you modified the HTML? The original challenge includes questions that apply only if the resolution involves HTML modifications, which (contrary to the earlier text viewed in isolation) indicates that such modifications are not invalid in response to the challenge.

Toutouxc 5y ago

> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling Totally this. We say we've come a long way from using tables for layout, but for example you still can't use Flexbox without at least some non-semantic .stuff-container and .radio-with-label junk. Decoupled HTML and CSS have failed in the real world, outside of pet projects.

nsonha 5y ago
I think grid is that powerful

freebreakfast 5y ago

> CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs and classes that are only there for styling. Can you provide an example? I've never found this to be the case, particularly with modern CSS. Happy to be wrong though.

andkon 5y ago
You've never put a number of elements together in a div, and added a class and styles to that div rather than each individual element? You should try it out.
- freebreakfast 5y ago
  I do so for semantics. I don't do it for style.
- iovrthoughtthis 5y ago
  nice, now your aesthetic is coupled to your information hierarchy style is orthogonal to semantics
seanwilson 5y ago
Take a look at the https://tailwindcss.com/ https://tailwindcss.com/ page and search for "div". Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox), to target content for styling (e.g. putting a div around the name of the author to make it blue when you otherwise wouldn't tag it) and to get around CSS quirks (search for "wrapper div" for examples).
- freebreakfast 5y ago
  The discussion is not about the semantic expressiveness of HTML. There are certainly limitations, but these are limitations of HTML. The discussion is about whether or not "tag soup" (excessive HTML elements) is necessary for styling with modern CSS. I cannot think of an example of where it is. > Can you replace them all with more semantic tags? If not, can you remove them and still style it the same way? I looked at on the first four examples, but my responses are yes and yes. Take the figure example. The first div, which groups blockquote and figcaption, is extraneous and unnecessary for the end styling result. The second div is not extraneous because it exists for a purpose. The purpose of the second div is to place emphasis on the name or make it stand out. Thus, it should be changed to em. The third div is extraneous. With the HTML in place, grid it up. You have the container (figure) with two columns and two rows. The image sits in the first column spanning both rows. The blockquote sits in the second column on the first row. The figcaption sits in the bottom right-hand corner. Then tweak to get your img and other parts as desired (e.g., width, spacing, font-size, etc.). > You need divs all the time for layout (e.g. to group parents/children in the right way for flexbox) ... to get around CSS quirks (search for "wrapper div" for examples). Sometimes flexbox is the wrong tool. Sometimes floats are better. Sometimes grid is better. If you find yourself reaching for extra HTML elements first, you should stop and re-evaluate whether your approach to achieving that layout is appropriate. On quirks, my experience is that "quirks" are rarely actual quirks. They are usually a limited understanding of HTML and CSS.

tomcooks 5y ago

Not eparating concerns also fails VERY hard, but that bites you in the arse when you least expect or want it (unlike writing good CSS which takes only patience and studying). There's a reason why inline styles and important! were to be avoided

iovrthoughtthis 5y ago
how are they separated though? if your css rules apply based on hierarchy they are incredibly tightly coupled to your html. separate files != separate concerns

rendall 5y ago

> "CSS isn't powerful enough to style HTML however you want without having to add a soup of extra divs..." This is untrue by any measure. This might have been true in the days before flex or grid, but with those additions, there is no need for extraneous styling divs. > "...and classes that are only there for styling." That part is confusing. Classes? As in CSS classes? CSS has no other purpose than styling.