CSS was created to reduce the complexity of a website’s code while providing the latitude to change it on the fly. All of this goes down the drain if you’re not organized. Looking back at some of the first sites I coded while developing my CSS Kung Fu, I realized it’s of the upmost importance for the “future me” and the others who will get their hands dirty in my code that I write clean css and have it organized in a clear way. Quick updates end up becoming all day processes because you are looking for the style that controls the list in the sidebar on the contact page. “Why the heck did I call that div id ‘content-stacked’ and why is it in the navigation stylesheet?” It must have made sense when I did it, but now it just seems random as all get out. Get yourself organized, fool! Here are some tips:
Pre-Production & Planning
Be an architect before you become a builder. What do you get when you try to build a house with no blueprints? I’ve never built a house before, so I’m not exactly sure, but I think it’s fair to assume the outcome is not so pretty and furthermore, I don’t think the house would be very safe. Same goes for a website. Actually, once there was a website out there built so poorly that the users visiting it ended up in the hospital for myopic herniation and cistern obliteration. True story.
So, to be safe, before I start coding I print out the design and mark it with all the width, length, padding, and margin measurements, hex codes, and font details. Not only does it provide me all the details in a handy little sheet while I’m building the site, it also allows me to mull the design over in my head, planning out the best possible way to go about it.
One Stylesheet
Unless you are styling something on the scale of Amazon.com (and if you’re reading this blog for help on such a massive site, god help you) use only one stylesheet. It may seem like a good idea to put the styles that control the navigation in one stylesheet and the styles that control the content in separate stylesheet, but isn’t. In the end it’s just confusing. What happens to the “more info” link styles? It’s technically navigation, but appears within the content and the sidebars. Which stylesheet will you choose: nav, content or sidebar? I guarantee you won’t remember which one you put it in a month later. Skip it and put it in one sheet. Simplify and everyone will be happy. It’s easier to find a style after the fact by searching for the style name in a single file than opening multiple files and searching in each. No doy!
Note Taking
Instead of using the multiple stylesheets, break the one sheet into a global section, a nav section, a content section, etc. Comment /*—–NAVIGATION STYLES– —-*/ out the headers for each section for easy searching. For people handling your code later on, try to take notes on the styles utilizing the comments: noting what they style is accomplishing within the page. This last bit of advice needs to be followed by myself a little more. Lay off man, I’m working on it!
Naming Conventions
Pick a naming convention and stick to it. Whether you like to name your styles thisWay or this_way or ThisWay or this-way, it doesn’t really matter, just don’t mix and match. I prefer the nocapCap version since a double click will select the entire word and really, it’s the coolest looking. Using a hyphen or an underscore will only select one part of the style name, which can have its benefits as well.
Naming Your Styles
Try to name your styles in regards to content: navBar, contentMain, etc, rather than location: right-sidebar, bottom-row, etc, as the client may want to move that sidebar to the left and that row to the top; then you’re stuck with a side bar on the left called right-sidebar and a row at the top called bottom-row. The people working with the code later on are going to think you’re a grade A moron because you don’t know your left from your right and your top from your bottom and maybe that’s the case, maybe you are dumber than a fence post, but heck if you want them to know it. I promise, it’ll be our little secret.
A well built site is adaptable and can be updated quickly and it’s up to you to accomplish this goal. Your structuring of the site effects all aspects of the project moving forward and getting it built correctly is all important. Jumping in head first and coding all willy-nilly might get you a site that looks pretty, but the inside will look uglier than David Hasselhoff’s soul. Book it!