css organization and colours

.color1 {
    color: #3d444d;
}

.main_text {color:#444444;}
.secondary_text{color:#765123;}
.main_color {background:#343434;}
.secondary_color {background:#765sda;}

<body class='main_text'>
  <div class='main_color secondary_text'>
    <span class='secondary color main_text'>bla bla bla</span>
  </div>
  <div class='main_color secondary_text>
    You get the idea...
  </div>
</body>

h1 {
 padding...
 margin...
 font-family...
}

p {
 ...
}

code {
 ...
}

/* time passes */

/* these elements are semantically grouped by color in the design */
h1, p, code {
 color: #ff0000;
}

p .frog tr.mango {
    color: blue;
    margin: 1px 3em 2.5em 4px;
    position: static;
}
#eta .beta span.pi {
    background: green;
    color: red;
    font-size: small;
    float: left;
}
// ...

p .frog tr.mango {
    color: blue;
}
#eta .beta span.pi {
    background: green;
    color: red;
}
//...
p .frog tr.mango {
    margin: 1px 3em 2.5em 4px;
    position: static;
}
#eta .beta span.pi {
    font-size: small;
    float: left;
}
// ...

<?php
    header("Content-Type: text/css");
    $colour1 = '#ff9';
?>
.username {color: <?=$colour1;?>; }

h1, p, code {
    color: #ff0000;
}

.color1 {
    color: #ff0000;
}