Styling in CSS is always dependent on the structure of HTML. If you have control over the structure of HTML, plan to redesign it also.

A good rule of thumb is to first, set up a system.

1. Usability and Accessibility (e.g., making a link’s target area large enough for touch or pointing device, making the structure of HTML accessible to screen readers)
2. Visual Design
   1. Nature (style of the element as a standalone)
   2. Layout (style of the element in relation to other elements)
   3. Colors (with nature and layout alone, the design should be able to work even in black and white colors)
   4. Graphics (border, border-radius, box-shadow)
   5. Typography (style of text)
   6. Transitions and Animations

You could notice that this system is designed to build on top of the previous one. Meaning usability and accessibility come first before visual design. The same goes for the considerations under visual design.

Originally published in Quora