Style sheet best practices : my personal guide
I must preface this by stating that I didn’t really come to any of these conclusions on my own, but rather through snooping through others CSS. I’ve made changes here and there to make it my own though. Here’s my list.
1. Reset
This isn’t something new and there are some discussions floating around on its usefulness but its helped me out of a bind or two. I trust those who are smarter than I and have decided to go with a reset. Eric Myers Has a great one which I have used on recent projects.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2. Color codes
No big surprises here but once you get used to having an easy color reference at the top of the style sheets its hard to imagine not having it there. Here’s how I go about it.
color codes orange #e95c41 teal #73c1b1 aqua #01b5d6 yellow #eade3e
3. Navigation
This is one of those things that depends on the size of the site and style sheet. I have left it out altogether but also have gotten quite detailed. The idea is to make your work easier for those who may be working with it in the future, or want to steal your code. Tip: look at the nav and then search “10.” you will find that it will take you to the “footer” section of the css, wonderfully easy!
navigation
1.reset
2.basic html
3.typeography
4.main content
5.header
6.work section
7.about section
8.contact section
9.article section
10.footer
11.@mobile, @print
12.IE fixes
4. Alphabetical
Arguabally useless and I won’t disagree but I like having things as organized as possible and have found this makes it slightly easier to skim the properties. For the amount of time it takes, it’s worth considering.
5. Indents
This is useful for bigger projects and something I have been using more recently. Its all about ease of use, if you can find what you are looking for easier its worth having. Here’s an example:
section{ }
section article{ }
section article h1{ }
section article h1 span{ }
6. Clean up(a good thorough cleaning after the project is done)
There are plenty of ways to clean up your code after you are done. First I would suggest just going through and making sure everything looks ok. We are all guilty of tampering with our styles and forgetting to remove something afterwards. It doesn’t hurt to use a site like CSS Lint, its a great tool to check for errors you might have missed. Be careful not to take these sites too seriously, you know your styles and why you write them the way you do better than anyone else.
7. Minify those puppies.
All done with your styles? Minification is key, every little kb counts. Take a look at your style sheets, there is a load of white space that could go. Apply this to your markup and JS and you are on your way to being the coolest coder on the block. *You won’t actually be any cooler.
So that’s it. Another great thing to keep in mind is templates. If you are like me you are typically writing the same code over and over for the same projects. Why not take some time and put together a basic template that you can use at the start to save you the hassle.
Tweet