Writing your CSS, one line or multi-line
October 8th, 2008
There is a debate, and it just isn’t a new comer vs. veteran on how to write your CSS. It really comes down to personal preference. On one side, people say that writing multi-line CSS is better, because attributes are easier to find for them. On the other side, the side I’m on, we feel that writing single line CSS is better. Some people argue that writing single-line results in a smaller file size, which I think is probably negligible. The reason why I like single-line CSS is that the page is drastically shorter, and it’s easier to find the style by scanning down the left column. Even with indenting, styles written multi-line can be a bear to go through. Text-mate helps out here, because you can list your styles and find the one you want, but I still think single line is better.
Here is a single line style, style sheet from a recent project. Judge for yourself which one is easier, it really comes down to how you prefer to work. I used to use the second version and I decided to try out single line on a project a couple months ago, and since then I haven’t looked back. To me, single line is much easier, more efficient, and better.
With single-line you scan down to the element, then across for the attribute, with multi-line - you scan down for the element then down for the attribute.
html, body {height: 100%;}
body {margin:0; padding: 0; text-align: center; background-position: center;}
img {border: none;}
p {color: #333; font-family: “Trebuchet MS”, Georgia, Serif; line-height: 150%;}
#wrapper {min-height: 100%; height: auto !important; height: 100%; width: 908px; margin: 0 auto -150px auto; position: relative;}
.push {height: 100px;}
#footer {height: 100px; background: #333; color: #fff; font-family: Arial, Verdana, Sans-Serif; text-align: center; clear:both; margin: 0;}
#footer p {line-height: 100px; font-size: 12px; color: #fff;}
#footer a, #footer a:visited {color: #b7d5eb; text-decoration: underline;}
#header {width: 908px; height: 204px; margin: 0; padding: 0; background: url(’../images/headerBG.jpg’);}
.nav {padding: 0; margin: 0; position: absolute; top: 0; right: 10px;}
.nav a, .nav a:visited {color: #fff; text-decoration: none; font-family: Arial, Verdana, Sans-Serif; font-size: 16px;float: left; width: 150px; height: 30px; margin: 0 1px; line-height: 30px; display: inline-block; background: url(’../images/nav/nav.png’);}
.nav a.cart {height: 30px; width: 50px; background: none;}
/* ———–about———— */
#aboutPanel {height: 200px; width: 507px; background: #333; display: none; position: absolute; top: 0; right: 10px; text-align: left; margin: 0; padding: 0;}
#aboutPanel .inner {padding: 30px 20px 0 20px}
#aboutPanel h1 {color: #fff; font-size: 16px; font-family: Arial, Verdana, Sans-Serif; font-weight: bold;}
#aboutPanel p {color: #fff; font-family: “Trebuchet MS”, Georgia, Serif; font-size: 12px; line-height: 150%;}
#aboutPanel a, #aboutPanel a:visited {color: #b7d5eb;}
#aboutPanel .aboutClose {float: right;}
/* ————-contact————— */
#contactPanel {height: 200px; width: 507px; background: #333; display: none; position: absolute; top: 0; right: 10px; text-align: left; margin: 0; padding: 0;}
#contactPanel .inner {padding: 30px 20px 0 20px}
#contactPanel h1 {color: #fff; font-size: 16px; font-family: Arial, Verdana, Sans-Serif; font-weight: bold;}
#contactPanel p {color: #fff; font-family: “Trebuchet MS”, Georgia, Serif; font-size: 12px; line-height: 150%;}
#contactPanel a, #contactPanel a:visited {color: #b7d5eb;}
#contactPanel .contactClose {float: right;}
/* —————product page—————–*/
#largeProduct {position: absolute; bottom: 0; left: 0; margin: 0; width: 451px;}
#largeProduct .add {position: absolute; bottom: 0; left: 215px;}
#largeProduct .back {position: absolute; bottom: 0; left: 57px;}
#largeProduct .photos {position: absolute; bottom: 0; left: 0px; height: 33px; width: 57px; overflow: hidden;}
.productPanel {position: absolute; bottom: 0; left: 0; display:visible; height: 377px; width: 500px; text-align: left; background: #fff; overflow: hidden;}
.productPanel #productPanelShot {float:left; margin: 0 10px 0 0;}
.productPanel .description {width: 275px; position: absolute; bottom: 40px; left: 185px;}
.productPanel .description h3 {font-size: 14px; font-family:Arial, Verdana, Sans-Serif; color: #000;}
.productPanel .description p {font-size: 12px; color: #333; font-family: “Trebuchet MS”, Georgia, Serif; line-height: 150%;}
.productPanel .switcher {float: right; padding: 0; margin: 0; list-style: none; margin: 5px 5px 0 0;}
.productPanel .switcher li {width: 50px; height: 50px; display: block;}
/* ——————legal——————*/
#legal {text-align: left;}
#legal .inner {padding: 10px;}
#legal h3 {font-family: Arial, Verdana, Sans-Serif; font-size: 14px; color: #000;}
#legal p {font-family: “Trebuchet MS”, Georgia, Serif; line-height: 150%; font-size: 12px; color: #333;}
#legal a, a:visited {color: #336699; text-decoration: underline;}
/* ————— home page —————-*/
#col1 {width: 229px; float: left; margin: 0 1px 0 0;}
#col2 {width: 229px; float: left; margin: 0 1px 0 0;}
#col3 {width: 229px; float: left; margin: 0 1px 0 0;}
#col4 {width: 218px; float: left;}
.product {height: 238px; width: 229px; background: url(’../images/productBG.png’); position: relative;}
.product .shot {margin: 7px 0 0 0;}
.product .add {position: absolute; bottom: 8px; right: 8px;}
.product .details {position: absolute; bottom: 8px; right: 68px;}
.subscribe {background: url(’../images/pattern.jpg’); height: 238px; width: 218px; text-align: left; position: relative;}
.subscribe .inner {padding: 12px;}
.subscribe .inner p {color: #333; font-family: “Trebuchet MS”, Georgia, Serif; font-size: 14px; line-height: 150%;}
.subscribe img {margin: 0; padding: 0;}
.subscribe .rss {position: absolute; bottom: 87px; left: 45px;}
.subscribe .twitter {position: absolute; bottom: 87px; left: 110px;}
.subscribe .facebook {position: absolute; bottom: 15px; left: 15px;;}
.subscribe .myspace {position: absolute; bottom: 15px; left: 79px;}
.subscribe .flickr {position: absolute; bottom: 15px; right: 15px;}
.breastCancer {background: url(’../images/breastCancer.jpg’); height: 238px; width: 218px; text-align: left; position: relative;}
.breastCancer .inner {padding: 12px;}
.breastCancer .inner h1 {font-size: 16px; color: #fff; font-style: italic;}
.breastCancer .inner p {font-size: 13px; color: #fff; line-height: 125%;}
.breastCancer a, .breastCancer a:visited {color: #fff; text-decoration: underline;}
Here is the same code, with the styles being multi-line
html, body {
height: 100%;
}
body {
margin:0;
padding: 0;
text-align: center;
background-position: center;
}
img {
border: none;
}
p {
color: #333;
font-family: “Trebuchet MS”, Georgia, Serif;
line-height: 150%;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
width: 908px;
margin: 0 auto -150px auto;
position: relative;
}
.push {
height: 100px;
}
#footer {
height: 100px;
background: #333;
color: #fff;
font-family: Arial, Verdana, Sans-Serif;
text-align: center;
clear:both;
margin: 0;
}
#footer p {
line-height: 100px;
font-size: 12px;
color: #fff;
}
#footer a, #footer a:visited {
color: #b7d5eb;
text-decoration: underline;
}
#header {
width: 908px;
height: 204px;
margin: 0;
padding: 0;
background: url(’../images/headerBG.jpg’);
}
.nav {
padding: 0;
margin: 0;
position: absolute;
top: 0;
right: 10px;
}
.nav a, .nav a:visited {
color: #fff;
text-decoration: none;
font-family: Arial, Verdana, Sans-Serif;
font-size: 16px;
float: left;
width: 150px;
height: 30px;
margin: 0 1px;
line-height: 30px;
display: inline-block;
background: url(’../images/nav/nav.png’);
}
.nav a.cart {
height: 30px;
width: 50px;
background: none;
}
/* ———–about———— */
#aboutPanel {
height: 200px;
width: 507px;
background: #333;
display: none;
position: absolute;
top: 0;
right: 10px;
text-align: left;
margin: 0;
padding: 0;
}
#aboutPanel .inner {
padding: 30px 20px 0 20px;
}
#aboutPanel h1 {
color: #fff;
font-size: 16px;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
}
#aboutPanel p {
color: #fff;
font-family: “Trebuchet MS”, Georgia, Serif;
font-size: 12px;
line-height: 150%;
}
#aboutPanel a, #aboutPanel a:visited {
color: #b7d5eb;
}
#aboutPanel .aboutClose {
float: right;
}
/* ————-contact————— */
#contactPanel {
height: 200px;
width: 507px;
background: #333;
display: none;
position: absolute;
top: 0;
right: 10px;
text-align: left;
margin: 0;
padding: 0;
}
#contactPanel .inner {
padding: 30px 20px 0 20px;
}
#contactPanel h1 {
color: #fff;
font-size: 16px;
font-family: Arial, Verdana, Sans-Serif;
font-weight: bold;
}
#contactPanel p {
color: #fff;
font-family: “Trebuchet MS”, Georgia, Serif;
font-size: 12px;
line-height: 150%;
}
#contactPanel a, #contactPanel a:visited {
color: #b7d5eb;
}
#contactPanel .contactClose {
float: right;
}
/* —————product page—————–*/
#largeProduct {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
width: 451px;
}
#largeProduct .add {
position: absolute;
bottom: 0;
left: 215px;
}
#largeProduct .back {
position: absolute;
bottom: 0;
left: 57px;
}
#largeProduct .photos {
position: absolute;
bottom: 0;
left: 0px;
height: 33px;
width: 57px;
overflow: hidden;
}
.productPanel {
position: absolute;
bottom: 0;
left: 0;
display:visible;
height: 377px;
width: 500px;
text-align: left;
background: #fff;
overflow: hidden;
}
.productPanel #productPanelShot {
float:left;
margin: 0 10px 0 0;
}
.productPanel .description {
width: 275px;
position: absolute;
bottom: 40px;
left: 185px;
}
.productPanel .description h3 {
font-size: 14px;
font-family:Arial, Verdana, Sans-Serif;
color: #000;
}
.productPanel .description p {
font-size: 12px;
color: #333;
font-family: “Trebuchet MS”, Georgia, Serif;
line-height: 150%;
}
.productPanel .switcher {
float: right;
padding: 0;
margin: 0;
list-style: none;
margin: 5px 5px 0 0;
}
.productPanel .switcher li {
width: 50px;
height: 50px;
display: block;
}
/* ——————legal——————*/
#legal {
text-align: left;
}
#legal .inner {
padding: 10px;
}
#legal h3 {
font-family: Arial, Verdana, Sans-Serif;
font-size: 14px;
color: #000;
}
#legal p {
font-family: “Trebuchet MS”, Georgia, Serif;
line-height: 150%;
font-size: 12px;
color: #333;
}
#legal a, a:visited {
color: #336699;
text-decoration: underline;
}
/* ————— home page —————-*/
#col1 {
width: 229px;
float: left;
margin: 0 1px 0 0;
}
#col2 {
width: 229px;
float: left;
margin: 0 1px 0 0;
}
#col3 {
width: 229px;
float: left;
margin: 0 1px 0 0;
}
#col4 {
width: 218px;
float: left;
}
.product {
height: 238px;
width: 229px;
background: url(’../images/productBG.png’);
position: relative;
}
.product .shot {
margin: 7px 0 0 0;
}
.product .add {
position: absolute;
bottom: 8px;
right: 8px;
}
.product .details {
position: absolute;
bottom: 8px;
right: 68px;
}
.subscribe {
background: url(’../images/pattern.jpg’);
height: 238px;
width: 218px;
text-align: left;
position: relative;
}
.subscribe .inner {
padding: 12px;
}
.subscribe .inner p {
color: #333;
font-family: “Trebuchet MS”, Georgia, Serif;
font-size: 14px;
line-height: 150%;
}
.subscribe img {
margin: 0;
padding: 0;
}
.subscribe .rss {
position: absolute;
bottom: 87px;
left: 45px;
}
.subscribe .twitter {
position: absolute;
bottom: 87px;
left: 110px;
}
.subscribe .facebook {
position: absolute;
bottom: 15px;
left: 15px;
}
.subscribe .myspace {
position: absolute;
bottom: 15px;
left: 79px;
}
.subscribe .flickr {
position: absolute;
bottom: 15px;
right: 15px;
}
.breastCancer {
background: url(’../images/breastCancer.jpg’);
height: 238px;
width: 218px;
text-align: left;
position: relative;
}
.breastCancer .inner {
padding: 12px;
}
.breastCancer .inner h1 {
font-size: 16px;
color: #fff;
font-style: italic;
}
.breastCancer .inner p {
font-size: 13px;
color: #fff;
line-height: 125%;
}
.breastCancer a, .breastCancer a:visited {
color: #fff;
text-decoration: underline;
}
Tags: CSS, how to write a style sheet, single line CSS vs. multi line CSS
This entry was posted on Wednesday, October 8th, 2008 at 5:18 pm and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
ray Says:
Leave a Reply