adamsilver/maintainablecss.com-jekyll

Why not use semantic elements in examples?

Closed this issue · 2 comments

mrmrs commented

Here you use these code example as "good" but they don't inform a computer or screenreader how to classify the content. Screenreader's do not parse class names for meaning. Can you elaborate how this markup in the example is more semantic?

<!-- good -->
<div class="header"></div>
<div class="basket"></div>
<div class="product"></div>
<div class="searchResults"></div>

@mrmrs

Why not use semantic elements in examples?

You're correct. I did not use semantic elements for say the header but for two reasons:

  1. MaintainableCSS is emphasising the use of additional class names, as is stated in the book.
  2. Using HTML5 can be problematic because some browsers don't style unrecognised HTML.

Some may be cool with it, some may not and avoid, some will use it and frig it with JS etc but I purposely avoided that in the guides. Perhaps I should provide a note on this. Thank you for bringing it to my attention.

Re screenreaders etc

You are correct, computers or screen readers will not benefit from these class names.

Can you elaborate how this markup in the example is more semantic?

No more than I already have done in your previous github issues and the book itself.

HTH

I have by the way since added HTML5 elements to the site. Happy to let non-supporting browsers lose support for styling.