Getting the best out of CSS

Cascading Style Sheets (CSS) have really changed the way we think about web page design, and they’ve certainly made creating awesome designs much simpler than it used to be.  Still, for such a great technology, there’s a huge amount that designers and developers need to learn in order to truly master the entire skill set required to earn the title of CSS Ninja.

1. Create an organized library of CSS that fits your design philosophy

Every time you do something in CSS that achieves a perfect result, you should categorize it and file it away, so that when you need to do the same task again, you already have the perfect code available and ready to adapt to suit the needs of the new project.

2. Use the console to help you debug stuff

The console is a really helpful sidekick if you learn how to use it properly.  There’s one super JavaScript command you should never be shy about using, which is the log command.  Here’s an example of how it works:

 var myObject = document.querySelector('#dragMe');
    console.log('Drag started');

You can see how the text will appear in the console when the event is detected.  You could improve this significantly by changing the relevant line to:

console.log(e.target.id + ' is being dragged around');

Which will not only tell you that a drag event is taking place, but which element is being dragged.  You can probably see the potential of this for checking all kinds of other useful information. Just don’t forget to remove all the log commands before making your site live.

3. Minification is not normally necessary for ordinary CSS files

Minifying is a big trend, but it’s not very useful when you’re trying to debug a problem to have to go and find some un-minified version of your CSS file before you can track down the bug, then rewrite it, and then minify everything again. What a waste of time just to save a few bytes!  Really, with internet speeds as they are, worrying about the spaces in your CSS file is just silly.  Consider instead not uploading that annoying and unnecessary Flash element.  That’s more of a problem!

4. Tidy code is good code!

If you just take a moment to indent all your CSS lines correctly and also group the attributes in some logical way (eg. put all the color information together, put all the positioning information together) or put the attributes in alphabetical order, it will be much easier for you to read and find the attribute you’re looking for and want to change.

5. Some truths are not entirely true

You can only have one element on a page with a particular ID attribute, right?  No, actually that’s wrong.  But you’ll see it written everywhere.  The truth is that although using multiple elements with the same ID is not normally a good idea, you can still do it if you want or need to.

6. Avoid shorthand declarations

This is related to tip 3, and it’s based on the same thing.  You don’t need to save space, and shorthand just leads to more confusion.

Emma Grant is a professional freelance content writer from Ireland. Over the past three years she has travelled the world while running her business from her laptop. You find her at www.florencewritinggale.com More articles by Emma Grant
Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress