logoalt Hacker News

xigoi • yesterday at 5:35 PM • 1 reply • view on HN

> Oh no! And what are the opening examples on any of the "proper pure-as-god-intended CSS" sites?

The first example on https://developer.mozilla.org/en-US/docs/Learn_web_developme...:

  <p>Instructions for life:</p>

  <ul>
    <li>Eat</li>
    <li>Sleep</li>
    <li>Repeat</li>
  </ul>

  p {
    font-family: sans-serif;
    color: red;
  }

  li {
    background-color: greenyellow;
    border: 1px solid black;
    margin-bottom: 5px;
  }
No divs and spans in sight.

Replies

troupo • yesterday at 7:08 PM

True! And Mozilla is one of the good guys.

What I should've said in my hastily written comment should have been: "and other implementations of the same (or other) functionality isn't divs and spans?"

I think my only true criticisms for Tailwind example would be:

- should've probably used h2/h3 for card titles. Though this is dependent on where and how the card is used

- should've done more with the meta (number / date). But in a real world these would probably still be spans (for example, to mark them in different colors etc.)

HTML doesn't have a card element. So when you create one, you... use whatever's available. And divs and spans in HTML+CSS literally exist to manipulate layout and text.

BTW, my favorite accessible card is this one: https://inclusive-components.design/cards/ And it's probably even more weird. Demo: https://heydon.github.io/Inclusive-Components/cards-redundan... (check the CSS also)

➕ show 1 reply