5 ms·

Are you saying use <div class="heading"> vs <h1> or even <span class="bold"> instead of <b> or <strong>? because if so I disagree. Just on accessibility grounds

Are you saying use <div class="heading"> vs <h1> or even <span class="bold"> instead of <b> or <strong>? because if so I disagree. Just on accessibility grounds this is a terrible idea. I also disagree strongly with using encapsulated CSS everywhere except for individual widgets (and even then, where possible widgets should inherit styling in a sensible way -- otherwise a list row that goes in a main window table needs to be implemented separately from a list that goes in a sidebar, etc. What I think is bad is having a convoluted CSS hierarchy. Having one or at most a few big standardized containers (e.g. document, tool-palette, browser) which receive reused styles and inline or very local css for specific cases allows you to implement preference settings, high contrast modes, etc. This is how actual desktop applications tend to work and they're a heck of a lot more complex than most websites.

Leimi 11y ago
> Are you saying use <div class="heading"> vs <h1> or even <span class="bold"> instead of <b> or <strong>? because if so I disagree. Just on accessibility grounds this is a terrible idea. Nothing stops you from styling classes in your CSS while still using meaningful tags in your HTML :)
- Tloewald 11y ago
  Exactly, so you can express intent with the tag ("this is a major heading") and presentation with CSS ("and it's in Times Bold 24px").
drinchev 11y ago
I'm actually saying giving a class name to all elements that you use inside the body tag. Really good reference is the new Calypso [1] Repository which has some really nice examples [2]. To answer specifically to your example. I usually write something like this : <h1 class="heading">Use <strong class="heading-keyword">classes</strong> instead of tag names</h1> Semantically the css looks much better .heading { ... } .heading-keyword { ... } Also keep in mind that CSS has built-in specificy, which is a game-changer and can turn your code into a nightmare. For your example I would never write ( using the same markup ) : h1 strong { color: blue; } strong { color: red; /* won't work */ } because to override it i would need to include the hierarchy all the time. 1: https://github.com/Automattic/wp-calypso/ https://github.com/Automattic/wp-calypso/ 2: https://github.com/Automattic/wp-calypso/blob/a7478174b0441760c332fcb4b8c454f5b8d73dfc/client/signup/step-header/index.jsx https://github.com/Automattic/wp-calypso/blob/a7478174b04417...

Leimi 11y ago

> Are you saying use <div class="heading"> vs <h1> or even <span class="bold"> instead of <b> or <strong>? because if so I disagree. Just on accessibility grounds this is a terrible idea. Nothing stops you from styling classes in your CSS while still using meaningful tags in your HTML :)

Tloewald 11y ago
Exactly, so you can express intent with the tag ("this is a major heading") and presentation with CSS ("and it's in Times Bold 24px").

drinchev 11y ago

I'm actually saying giving a class name to all elements that you use inside the body tag. Really good reference is the new Calypso [1] Repository which has some really nice examples [2]. To answer specifically to your example. I usually write something like this : <h1 class="heading">Use <strong class="heading-keyword">classes</strong> instead of tag names</h1> Semantically the css looks much better .heading { ... } .heading-keyword { ... } Also keep in mind that CSS has built-in specificy, which is a game-changer and can turn your code into a nightmare. For your example I would never write ( using the same markup ) : h1 strong { color: blue; } strong { color: red; /* won't work */ } because to override it i would need to include the hierarchy all the time. 1: https://github.com/Automattic/wp-calypso/ https://github.com/Automattic/wp-calypso/ 2: https://github.com/Automattic/wp-calypso/blob/a7478174b0441760c332fcb4b8c454f5b8d73dfc/client/signup/step-header/index.jsx https://github.com/Automattic/wp-calypso/blob/a7478174b04417...