Simon Suh Simon Suh - 1 year ago 69
CSS Question

Why is this method of css organization better?

A senior developer at my workstation codes like this:

table {border-collapse: collapse;border-spacing: 0;}
fieldset,img {border: 0;}
address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var {font:inherit;}
del,ins {text-decoration: none;}
li {list-style: none;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;font-weight: normal;}
q:before,q:after {content: '';}
abbr,acronym {border: 0;font-variant: normal;}
sup{vertical-align: baseline;}
sub{vertical-align: baseline;}
legend {color: #000;}

I coded the same thing like this (different part of same css code that i worked on before the senior developer reviewed/rewrote my code):

html {
background-color: #7e1d32;
font: 16px/22px arial, sans-serif;
#outer_container {
min-height: 598px;
width: 100%;
background: #D4D4D4 url('../images/top_bg.gif') repeat-x top left;
#inner_container {
min-height: 698px;
width: 100%;
background: #D4D4D4 url('../images/top_designed_bg.jpg') repeat-x top center;

/* top orange banner */
#top_orange_bar {
height: 47px;
width: 100%;
background: transparent url('../images/top_orange_bg.gif') repeat top left;
#top_orange_bar_content {
width: 1026px;
margin: 0 auto;
#top_orange_bar_content .left {
float: left;
width: 730px;
margin-left: 40px;
#top_orange_bar_content .left h4 {
text-transform: uppercase;
letter-spacing: 1px;
font: bold 14px/52px arial, sans-serif;
color: #7f1e32;
#top_orange_bar_content .right {
float: right;
width: 160px;
margin-right: 40px;
text-align: right;
#top_orange_bar_content .right a {
margin-top: 8px;

What are the advantages of writing css code the way the senior developer did?

Answer Source

Well, he is not so senior...
He read somewhere that extra characters makes pages load slower, he is right, BUT Code needs to be maintainable and readable.
You should code the way you do, and use a minifier to clean your code of white space character when deploying the file to production. Usually this is a part of the build/release process.
That would be what a senior developer would do.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download