Ggtcf

Which is the more preferred style of CSS styling in the industry?

1. 
   

   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;


   
   


2. 
   

   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?

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 */

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.

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