말은 거창한 것 같지만 간단히 말해서 기본값(공용값)을 여러 클래스(또는 아이디, 태그로 정하는건 안좋은 습관)에 값으로 지정하는 것입니다.

.a , .b , .c {color:red}

이렇게할 경우 클래스 a,b,c는 각각 빨간색의 색(기본으로 폰트컬러)를 가지게 됩니다.

.a { font-size:10px;}
.b { font-size:20px;}
.c { font-size:30px;}

이것을 추가할 경우 클래스a,b,c는 색은 같지만 크기가 각각 10px,20px,30px로 다르게됩니다.

나중에 색을 수정할 경우 .a , .b , .c {color:red}만 수정하면 바로 수정이되죠.

div.skin{ font-size:12px;}
/* deafult : border-color*/
div.skin .border , div.skin td.title , div.skin .box
, div.skin div.info , div.skin div.infoL ,div.skin div.infoR{ border-color:#aabbcc;}

/* deafult : background-color*/
div.skin td.title , div.skin .box
, div.skin div.info , div.skin div.infoL , div.skin div.infoR
,div.skin td.line { background-color:#f2f2f2;}

/* deafult : box*/
div.skin .box , div.skin div.info
, div.skin div.infoL ,div.skin div.infoR{ white-space:nowrap;  line-height:180%; float:left; padding:1px 5px; margin:1px 5px; border:1px solid;}

div.skin table.skin{ table-layout:fixed;}
div.skin td.title{ font-size:12px;font-weight:bold; padding:4px 0; border-top:1px solid;border-bottom:3px double;}
div.skin td.normal{ font-size:12px;padding:4px 0;}
div.skin td.line{ padding:0; margin:0px; height:1px; font-size:0; line-height:0;}
div.skin div.info , div.skin div.infoL{ float:left;}
div.skin div.infoR{ float:right; }
div.skin .border{ border:1px solid;}

div.skin div.info , div.skin div.infoL{ float:left;}
div.skin div.infoR{ float:right; }
div.skin .border{ border:1px solid;}

위 관점으로 구성해본 CSS입니다.
/*deafult : ~~~*/ 이라고 주석으로 표시된 것은 기초적인, 보더색,배경색, 보더 모양을 정의하고
각각의 클래스에 밑에 따로 추가적인 설정를 하도록 되어있습니다.

CSS를 사용하는 이유 중 하나는 스타일 관리때문이죠.
이렇게 구성함으로 좀 더 체계적인 CSS 사용,관리가 가능해집니다.