3 ms·

This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as: <my-product>...</my-product> Any tag with a hyphen

This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as: <my-product>...</my-product> Any tag with a hyphen is considered a custom element, which is completely valid HTML -- even without defining the element in JS. This gives you a more descriptive `div`, and then instead of classes like `product-primary`, you can use semantic attributes, like `<my-product primary size="large">`. In combination with CSS nesting, you can get some great looking HTML and CSS with minimal markup/visual noise and no build step.

croisillon 2y ago
you don't need a hyphen for a custom tag ; as far as i know the hyphen makes it an inline element while no hyphen makes it a block
- MrVandemar 2y ago
  You do need a hyphen for a custom-tag. The HTML specs have guaranteed never to create a tag with a hyphen, so it prevents collisions with any future tag additions.
Theodores 2y ago
Commercial work is different to pet projects, and, given that I have been told off for using <address> before now, I am wary of making up mu own elements. I quite like styling the attributes, which gets me half-way to what you describe. In ecommerce we have all kinds of extra attributes for marking up products, although you can ditch that and just have a chunk of JSON+LD these days. What happens is that I end up with great document structure and human readable/writable HTML and no CSS preprocessor things needed. However, sometimes I have things such as lots of sections containing lots of articles that contain lots of sections. I might take your tip to write '<top-category>' for those top-level sections. When styling the elements, you tend to use the full range of elements, so a list could be a <dl>, <ol> or <ul> even if it eventually just gets styled as an <ul>. Really, semantics needs to come first, even if the presentation is just normal stuff. I keep finding code examples where people are doing more than just using divs, which means that I am feeling more confident flexing the whole HTML element LEGO set.

croisillon 2y ago

you don't need a hyphen for a custom tag ; as far as i know the hyphen makes it an inline element while no hyphen makes it a block

MrVandemar 2y ago
You do need a hyphen for a custom-tag. The HTML specs have guaranteed never to create a tag with a hyphen, so it prevents collisions with any future tag additions.

Theodores 2y ago

Commercial work is different to pet projects, and, given that I have been told off for using <address> before now, I am wary of making up mu own elements. I quite like styling the attributes, which gets me half-way to what you describe. In ecommerce we have all kinds of extra attributes for marking up products, although you can ditch that and just have a chunk of JSON+LD these days. What happens is that I end up with great document structure and human readable/writable HTML and no CSS preprocessor things needed. However, sometimes I have things such as lots of sections containing lots of articles that contain lots of sections. I might take your tip to write '<top-category>' for those top-level sections. When styling the elements, you tend to use the full range of elements, so a list could be a <dl>, <ol> or <ul> even if it eventually just gets styled as an <ul>. Really, semantics needs to come first, even if the presentation is just normal stuff. I keep finding code examples where people are doing more than just using divs, which means that I am feeling more confident flexing the whole HTML element LEGO set.