In my experience, I have adopted a similar approach to the second method mentioned. This involves specifying style class/id names in the HTML tag, such as
<p class="sample">...</p>
, and then detailing those styles in a separate CSS file:
.sample {
font-family:Arial;
font-variant:small-caps;
color:#FF0;
text-align:center;
}
One key advantage of this method is its efficiency. By consolidating all style details into one file, it only needs to be loaded once for site visitors, making it quicker to render each page they visit on your website. This not only enhances the user experience by reducing loading times but also streamlines the coding process for you as a developer. Once you establish the desired look for your website, you can create all element styles and reference them as needed, saving time during site creation. (Note: having more than one CSS file is still possible and valid.)
While there are instances where listing multiple class/id styles for an element may be necessary, separating each individual style into its own class/id can be excessive. Instead, consider grouping everything for your class="sample" under .sample in your CSS.
The adoption of this method by reputable organizations such as W3C, Mozilla, and edX underscores its status as the "industry standard":
W3C Starting with HTML + CSS
Mozilla's Introduction to CSS Layout
edX's CSS Courses