We continue with our examination of CSS with some real basics- formatting, writing rules, organization and the like. Nothing groundbreaking, but the basics are important in any endeavor, so here they are.
Formatting
During development I format my CSS with selectors on one line and then each property on its own line. The declarations are indented 4 spaces. I like this style because my interest is always in the properties, not the selectors. I can find any selector I need with CTRL+F and then I can easily scan down the list of properties to do my business.
It looks like this:
#main article strong {
font-weight:bold;
}
#text #main article blockquote {
background:#efefef url(https://d1eucpngoftcha.cloudfront.net/_assets/styles/images/bq-bg.png) no-repeat;
color:#600;
font-style: italic;
margin: 15px auto 30px auto;
padding: 30px 30px 15px 75px;
}
#text #main article blockquote cite {
color:#333;
font-size:90%;
font-style:normal;
}
#text #main article ul {
font-size:14px;
margin: auto auto 30px 15px;
}
Some people take that approach and indent related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet. That looks like this:
.post-list li a{
color:#A8A8A8;
}
.post-list li a:hover{
color:#000;
text-decoration:none;
}
.post-list li .author a, .post-list li .author a:hover{
color:#F30;
text-transform:uppercase;
}
Other people like to scan the file for selectors, so they produce CSS with selectors and declarations on one line. I personally have a hard time with this style, but some people I know swear by it, so I present it here:
#wrapper {width:800px; margin:0 auto;}
#header {height:100px; position:relative;}
#feature .post {width:490px; float:left;}
#feature .link {width:195px; display:inline; margin:0 10px 0 0; float:right;}
#footer {clear:both; font-size:93%; float:none;}
#footer .wrapper {float:none;}
Whatever style you use, it’s good practice to minify your CSS before pushing to production so that all the extra characters you pump into your sheets for ease-of-use as a developer don’t slow down the experience of your users.
Shorthand
There are two ways to approach many families of CSS properties: verbose and shorthand. Verbose properties look like this:
.verbose {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-style: italic;
line-height: normal;
font-weight: bold;
color: #003333;
background-color: #FFFFCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
Shorthand looks like this:
.shorthand {
color: #003333;
font: italic bold 12px/normal "Times New Roman", Times, serif;
background: #ffffcc;
padding: 5px 10px 15px 20px;
}
Once you’re used to it, shorthand is much faster to write and it takes up a lot less space. So… use shorthand. To get you started, here’s a fancy guide Dustin Diaz put together a few years ago. It’s out of date for newer properties, but it’s useful for the stuff you’re going to use every day.
One thing that’s super-useful to remember is the TRBL acronym which give the order of values in properties like margin and padding.
Reset Style Sheets
Much has been written about reset style sheets. I’m not going to add to the noise here. The point of them, simply, is to level the playing field across browsers so that you start from a common point when creating styles for your site or application.
I use one, and suggest you do too. As to which one, for a while I used a variation of Eric Meyer’s reset reloaded with the later addition of the following line in place for HTML5 sites to set proper display types for the new elements:
article,aside,canvas,figure,footer,header,hgroup,menu,nav,section,summary {
display:block;
}
For my latest project we’re using this HTML5 Reset, which is based on Meyer’s sheet and adds several HTML5 enhancements.
I like it.
Organization
I organize my style sheets by area of the page, seriously influenced by the order in which I work on things.
The basic structure might look something like this:
_____________________ | Copyright | ------------------------ | Common colors | ------------------------ | Reset Section | ------------------------ | Basic Typography | ------------------------ | #Header | ------------------------ | #Content | ------------------------ | #SideBar | ------------------------ | #Footer | ------------------------ | #Random Widgets | ------------------------
I try to comment each section clearly and comment where appropriate outside of the sections to illustrate strange and wondrous constructions.
A small (production) snippet might look like this:
/* -------- COLORS ---------
lightest gray: efefef
light gray: ccc
medium gray: 999
darker gray: 666
darkest gray: 333
light blue links: 69F
body light blue links : 4B87C2
dark blue links : 036
visited: 306
red 930
--------------------------*/
/*reset section*/
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
footer, section, article, nav, header, aside, figure, dialog {
display:block;
}
body {
font: 13px Verdana, Arial, Helvetica, sans-serif;
color: #666;
background-color:#ccc;
padding-bottom:50px !important;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
/*main div- holds the rest of the site*/
#container {
margin: auto;
width: 992px;
background-color:#fff;
}
/*************header*****************/
#header {
padding-top:20px auto auto 0;
border-right:10px solid #fff;
border-left:10px solid #fff;
position:relative;
}
/*the anchor inside the h1*/
#container #header h1 a {
text-decoration:none;
color:#999;
font: bold 30px Consolas, Inconsolata, "Lucida Console", Monaco, "Lucida Sans Typewriter", monospace;
}
#header h1 strong {
color:#333;
margin-right:-16px;
}
#header h1 em {
color:#666;
margin-right:-16px;
}
#header h1 a:hover {
text-decoration:underline;
}
/*tagline*/
#respond, #container #header .title {
font-size: 18px;
color: #999;
margin-top:10px auto 20px auto;
font-style:italic;
}
/*end header*/
/************************main content area*****************/
/*overflow:auto clears floats like magic*/
#content {
overflow:auto;
border-right:10px solid #fff;
border-left:10px solid #fff;
}
/*main copy area*/
#container #copy {
width:600px;
border:1px solid #999;
padding: 16px 10px 16px 12px;
float:left;
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
-moz-box-shadow: 0px 0px 8px #999; /* FF3.5+ */
-webkit-box-shadow: 0px 0px 8px #999; /* Saf3.0+, Chrome */
box-shadow: 0px 0px 8px #999; /* Opera 10.5, IE 9.0 */
margin-bottom:20px;
}
/******************************/
/* AND SO ON */
/******************************/
Again, it’s useful to minify your CSS to strip out all of those comments and all of that whitespace. Comments are good for development though, so be sure to use them.
and there you have it. some info on some very basic, but very important CSS practices. Next time we’ll start to look at common techniques.
Should be fun.
Great series Rob. Found it really useful in joining up my rather patchy knowledge of HTML, etc…but I want more! You’ve not posted any more in this series for a while. Are there any more coming or is the new job taking up too much time…?
Thanks,
Alan