Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
I would like to point that on the first example you must use IDs, as I assume it's not intended to be two main-contents on the same view.
<main id="main-content">
<!-- main content is here -->
</main>
Now you can scope your CSS/SCSS and your JS inside #main-content instead seeking across all DOM elements in search of the main-content class usage.
For example using ID you'll ensure the interpreter stops when finding the element with this ID, making it much more efficient than using unscoped classes.
The WHATWG spec allows to use a few main elements on one page. But only one of them must be visible. So if you think that you can use IDs only because the main is an unique element is a mistake. Also you can find enough articles why using IDs in CSS is a not good idea.
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
More or less the same amount of articles about why articles telling people not to use IDs are opinionated and a nonsense.
IDs have a reason to be and must be used for this reason. This includes scoping CSS and JavaScript, which increases your site performance.
You can have more than a main element, of course (which is kinda contradictory semantically) but this doesn't lead you for not adding a proper id to each one.
Oh and... Spoiler alert: standards on web are not standard, welcome to web dev world!
So devs must do what it's intended on an engineering: create what is better for the purpose with the knowledge on how things work, not blind following the opinion or reasons for some statements if it doesn't fit on a context or if it evolved faster than the "standard" did (which is tiredly common on IT development, specially front end). It's science after all, if you want to follow the rules without digging deeper and being comfortable with that there are other non-scientific careers out there.
In a single document, rather than multiple <main></main> elements, wouldn't it make more semantic sense to use multiple <article></article> blocks? That's what I tend to do when there is not one <main>...
Tech Lead/Team Lead. Senior WebDev.
Intermediate Grade on Computer Systems-
High Grade on Web Application Development-
MBA (+Marketing+HHRR).
Studied a bit of law, economics and design
Location
Spain
Education
Higher Level Education Certificate on Web Application Development
Yes, of course. Remember that articles are meant to be children of a . You can also use depending on context (not all content fits well semantically inside an article).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I would like to point that on the first example you must use IDs, as I assume it's not intended to be two main-contents on the same view.
Now you can scope your CSS/SCSS and your JS inside #main-content instead seeking across all DOM elements in search of the main-content class usage.
For example using ID you'll ensure the interpreter stops when finding the element with this ID, making it much more efficient than using unscoped classes.
That's why people using invalid html struggles like on this SO question .
Best regards
The WHATWG spec allows to use a few main elements on one page. But only one of them must be visible. So if you think that you can use IDs only because the main is an unique element is a mistake. Also you can find enough articles why using IDs in CSS is a not good idea.
All the best
More or less the same amount of articles about why articles telling people not to use IDs are opinionated and a nonsense.
IDs have a reason to be and must be used for this reason. This includes scoping CSS and JavaScript, which increases your site performance.
You can have more than a main element, of course (which is kinda contradictory semantically) but this doesn't lead you for not adding a proper id to each one.
Oh and... Spoiler alert: standards on web are not standard, welcome to web dev world!
So devs must do what it's intended on an engineering: create what is better for the purpose with the knowledge on how things work, not blind following the opinion or reasons for some statements if it doesn't fit on a context or if it evolved faster than the "standard" did (which is tiredly common on IT development, specially front end). It's science after all, if you want to follow the rules without digging deeper and being comfortable with that there are other non-scientific careers out there.
In a single document, rather than multiple
<main></main>elements, wouldn't it make more semantic sense to use multiple<article></article>blocks? That's what I tend to do when there is not one<main>...Yes, of course. Remember that articles are meant to be children of a . You can also use depending on context (not all content fits well semantically inside an article).