Best practices & strategy

[Laurent*]

Introduction

I want to standardize my approach to building a css style sheet and the way I use my classes in my HTML. I download the w3 architect template along with w3 css style sheet. I've made edits to the HTLM page to my personalize agenda but I'm unsure how to personalize the css file. From my research looking around the web while I waited for approval, I noticed the w3 css style sheet might be badly written due to how often the !important operator is used, and a few naming problem. I'm very unsure what is right and what is wrong. I have 2 primary goals I want to accomplish. 1st: How should I structure the classes in my css? 2nd: How should I apply styles in the html file? 

 

Goals

I've learned there are many ways to structure classes in css. http://stackoverflow.com/questions/5196583/target-elements-with-multiple-classes-within-one-rule/7270033#7270033 What would be the best method for structuring class? Which classes should have children? Should one item have multiple classes and if so how many? Regarding the html part of my personal project I've done some experimenting. I noticed classes being override. I tested multiple conditions and I came to conclusion I should have a process so I get exactly what I want with no override. When I mean process I meant the process of applying style. The example below shows I want to apply styles in a step by step fashion. .I fear I might not be covering enough considerations which is why I want determine a routine process for applying any styles.

Example:

Step 1) Align object -> (Step 2) Determine font -> (Step 3) color ->(Step 4) ect 

 

Any advice?