TCorner is a serialized blog post from our newest Labs member, Taylor Cornelius.  TCorn comes from a design background and these are his adventures on the development side of the fence.

I would like to share some pointers to optimize your CSS files to optimize navigation and avoid confusion.

When I create a new CSS file the first thing I do is reset all of my styles. Each browser has default style settings that will substitute themselves if you do not specify a value for them within your stylesheet. A style reset chains together common HTML tags and sets basic values in order for you, the developer to start fresh. I get my CSS reset from meyerweb.com.

I don’t always know what classes and ids I will need for my HTML elements but I use them like a gentleman. I’ve found that I work best when I get all of my HTML in place, begin styling, then go back and add classes and ids. I may even add more HTML after I’ve done a lot of styling. Adding multiple classes to an element is a good way to avoid excessive typing.  Efficiency is paramount when styling your html.

Another good habit of getting into is using those new HTML5 element tags. A lot of developers I know do not use them in favor of divs and spans, which is what they’ve been taught but in my opinion the new tags are more understandable. It’s faster to style an article tag than to create a class on a div and name it something that you can remember to reference. The HTML5 tags are there to help.

D.R.Y. stands for Don’t Repeat Yourself. In my stylesheets I will add global styles to the top of my document so that they set the foundations and get out of my way. I refine from there, getting more specific further down. Almost as if there’s a cascading effect. Not only will this help you build from the ground up, but you will find it easier to navigate to a particular place in your CSS file if you aren’t repeating styles. Remember to chain tags and classes together to avoid duplication of work.

Go go gadget element inspector! If you are getting into CSS hardcore you had better get comfortable with your preferred browsers element inspector. This will help you immensely in debugging your stylesheet. You will also gain insight into how you are nesting elements in your HTML. With the addition of breakpoints in your stylesheet it is a good idea to have your element inspector open at all times.

The Tip: Tcorn’s UX tip of the week

Legibility refers to how well people can see the different characters and symbols in text. Readability refers to how complicated the words in your text are.