CSS Styling approach - html

Question

Which is the more preferred style of CSS styling in the industry?
Create classes for each attribute (like bootstrap), then attach the classes in HTML. For example:
HTML: <p class="text-white text-bold"> John Doe </p>
CSS:
.text-white {
color: white;
}
.text-bold{
font-weight: bold;
}
Add usually 1 class per html tag. For example:
HTML: <p class="description"> John Doe </p>
CSS:
.description {
color: white;
font-weight: bold;
}
Which is overall the better approach?

Answer 1

Based on my experience, I am usually doing the first approach. Reason for this is for code reusability, because you can still apply it to any elements that would be needing the same styling.
Always name your classes as generic as possible.
Example:
.hand { cursor:pointer; }
.padding-5 { padding:5px; }
.padding-left-5 { padding-left:5px; }
.border-1 { border:solid 1px #f00; }
.corner-1 { corner-radius: 3px; }
.margin-auto { margin: auto; }
.bgcolor-1 { background-color: #b2e8ff; } /* light blue */
.bgcolor-2 { background-color: #FFF3CD; } /* light yellow */
.table-hover tr:hover { background-color: #eaf6ff !important} /* overide bootstrap's table hover */

Answer 2

Don't do it like that. Having only one style in a class will get confusing it would more so than putting all the styles for a element in its tag as
<div style="border:solid 1px #333; color:#0f0; etc;
What I found is a better approach is to create a generic type group class as
.boxStyle1{
border:solid 1px #333;
color:#0f0;
}
.fontStyle1{
font-family: Arial, ...;
font-size:.9em;
}
And using them in different elements such like
<div class="boxStyle1 fontStyle1">
Using the group style approach lets you apply the same theme for different elements depending on what look you want. This way its less confusing when you want to change the look of your site.

Answer 3

I learned something similar to the second method. You specify style class/id names indicated in the HTML tag, <p class="sample">...</p>, then outline those details in a separate CSS file:
.sample {
font-family:Arial;
font-variant:small-caps;
color:#FF0;
text-align:center;
}
One of the primary benefits is efficiency. With all of the style details in one file, it's loaded once for your site visitor and the information is available to render for every page of your website that they visit. Thus reducing the amount of time it takes for your pages to load and improving the user experience. It is also more efficient for you while you are coding your pages. Once you decide how you want your website to look, you can create all of the element styles and reference it as often as necessary, greatly reducing the time to create your site. (Note: this does not mean that you can not or should not have more than one CSS file.)
There are occasions when you want to list more than one class/id style for an element: <div class="sample sample2"></div>. Sometimes it makes sense to do it, however, seperating each individual style into it's own class/id is superfluous. Learn to group everything for your class="sample" in your CSS .sample (class).
The W3C, Mozilla, and the online courses offered through edX all support this method as well. Which should clearly indicate that it is the "industry standard".
W3C Starting with HTML + CSS
Mozilla's Introduction to CSS Layout
edX's CSS Courses