Tips

Essential Practices for Styling Your CSS

June 23, 2009 • By

Writing CSS leaves an immense amount of time in the hands of the coder. When it comes to CSS, each and every designer has his or her very own special method to coding. With Cascading Style-Sheets you can virtually do anything you want, which is mostly valuable, however, if you are inexperienced, it can most certainly hurt you in the long run.  Most of the designers and developers only accomplish to scratch the surface of the amazing abilities of CSS.

It’s surely an interesting adventure becoming aware of the infinite possibilities CSS has to offer. It’s important for developers to continue to learn and improve their coding techniques, it’s essential to a designers advancement in expanding their knowledge base. Have a look at a few essential techniques to enhance your styling:

Writing Clean, Semantic Code

An exceedingly overlooked aspect of constructing CSS style sheet involves the developers ability to write clean, semantic code (marking your code with corresponding tags, for example, h1, h2, br, ul, and so forth). You don’t need to be a CSS guru, but you should have firm knowledge of the basics. A vast majority of designers don’t realize that making use of valid code allows their pages to be more accessible to user agents, which in return gives people equal access to their information.

We live in a world where the web isn’t exclusively accessible through a computer’s browser, not since Internet users can gain quick access to the web with the stroke of a few keys on their Mobile devices. Therefore, your markup should adequately cooperate with a wide range of browsers and Mobile gadgets. Once you’re able to separate structure from presentation you immediately gain the ability to create a more accessible, valid, well structured page.

Properly Commenting on Your CSS Style Sheets

With every markup, it’s essentially important to keep your style sheet well cataloged (especially if your style sheet containes complex strings of code). Classifying sections of the style sheet works very well, but from time to time it also helps to write quick reminder or note.

Align Comments in Consecutive Lines

If your style sheet contains multiple lines of code with numerous trailing comments, you should align the comments so they will be easier to read. This will immensely extend the readability of your CSS.

color: #6C6C6C;    // See how aligning these comments
font-size: 10px;   // make them easier to read?

Getting to the Point

Don’t write more than necessary comments in order to convey the idea.  Avoid ASCII art, rude remarks, and anything else that can deviate the developer trying to read your code from the main idea.  Bottom line, keep the comments simple, direct, and effective.

Updating Your Comments

What would be the point of commenting on code if the comments are not changed once you’ve updated that string of code?  Both the code and comments must move in parallel motion, if not, the comments will make it difficult and confusing for developers who maintain your code.  If you use tools that automatically change your code, always remember to go back and change the comment on that specific code if applicable.

Using Sections to Organize Your Style Sheets

You’ll be astonished to find how helpful it is to organize your style sheets by section. To the more collective developer it may seem like common sense to do so, but sometimes the new designers/developers will only start to acknowledge these things towards the end of their style sheet where it rarely helps other developers. This will allow you to adequately maintain your code, and not to mention the facility of quickly finding what you’re looking for if a sudden change needs to be made.

Here’s what a well organized style-sheet would look like with and without sections:

Without any sections

body {font:16px helvetica, verdana, arial, sans-serif}
h1 {font-size:24px; margin:0 0 20px 0; color:#00f}
h2 {font-size:24px; margin:20px 0 0 0; color:#0f0}

#wrapper {width:960px; margin:0 auto}

#nav li a {padding:5px 10px; text-decoration:none; color:#fff; font-size:12px;}

#sidebar {float:left; width:320px; font-size:12px; line-height:18px; margin:20px 0}
#sidebar h2 {font-size:18px; border-bottom:1px solid #999}

Code placed within sections

/* ------------------------------
 		 layout
 ----------------------------- */
#wrapper {width:960px; margin:0 auto}

#sidebar {float:left; width:320px; margin:20px 0}

/* -----------------------------
 		Typography
----------------------------- */
body {font:16px helvetica, verdana, arial, sans-serif}

h1 {font-size:24px; margin:0 0 20px 0;}
h2 {font-size:24px; margin:20px 0 0 0; }

#nav li a {font-size:12px;}

#sidebar {font-size:12px; line-height:18px;}
#sidebar h2 {font-size:18px; }

Abusing the Amount of Times You Refresh a Page

I used to have a nasty habit of refreshing my browser after I changed every single selector or element. I would waste valuable loads of time by writing a line of code, surely knowing the exact effect it was going to have on the visual appereance on the site, but I’d still refresh the browser at any rate.

You’ll soon come to learn (if you haven’t already) that every bit of second or minute that a developer saves is time used on a more constructive apect of your design. Constantly taking a step back to reflect upon your design, and obsessively refreshing the browser just to see how things are going will significantly slow you down. If you wish to become more proficient with CSS, then you’ll need to learn to trust yourself. Try to gain your own trust that what you are coding is going to react the same as you’d expect it to, and try to considerably limit the amount of times you refresh your browser.

Indenting Your Code, the Smart Way

If you wish to make your code easier to read and understand, add indentation. Indenting makes your codes structure a lot clearer and more collected, you’ll easily be able to find large sections and otherwise hard to find strings of code.

One thing you must know is not to abuse the use of indentation, overly indenting your style sheets can cause great confusion and ruin the techniques you’ve used to organize your code. A large misconception when indenting is the use of double indention, honestly, this is simply a waste of space and time. Keep it simple, and your code will always fall into place.

Example of clear indentation:


#header { ... }
   #header h1 { ... }
   #header h2 { ... }
#content { ... }
   #content p { ... }
      #content p em { ... }
      #content p strong { ... }

Compressing Your Style-Sheet

It’s good practice to compress your CSS before deployment. It’s very important to keep in mind that Web browsers download style sheets in full. Of course, anything you do to reduce that inference will in good faith improve performance. If your writing style produces quite a bit of whitespace and/or comments, it may be in your best interest to compress your CSS before deployment.

The following is a small technique to keep our code intact but to compress it the same time. You’ll only need to add a few PHP lines at the very top of your CSS file and one final line at the very bottom. In a short description, here’s how it works: The user’s browser will request the stylesheet, then the server will read the lines located at the top and compress the file following our PHP code. The stylesheet will be compressed and outputted to the user’s browser.

The original codes and examples can be found here.

Concluding Our Styling Techniques

It’s vital to take advantage of as many techniques as possible in order for you not to hinder your skill set. I hope the techniques listed above, while a bit simple, have helped out. Being able to code in CSS is an incredible and gifted skill to have, but it is a skill which can be constantly refined over time. The faster and more disciplined you are with development side of design, the more time can be spent on trouble shooting and achieving the best possible design. Hopefully you’ll be able to incorporate some of these techniques into your style writing and it will make your life as a developer a bit smoother.

(Visited 49 times, 1 visits today)