допустим есть запись:

#body ul li {
    display:-moz-inline-stack;  /*Needed Firefox*/
    display:inline-block;       /*Don't used in IE and Firefox*/
    _overflow:hidden;           /*Fix for IE6*/
    zoom:1;                     /*Turn on hasLayout*/
    *display:inline;            /*With hasLayout true display:inline behave like display:inline-block*/
}
 
#menu ul li {
    display:-moz-inline-stack;  /*Needed Firefox*/
    display:inline-block;       /*Don't used in IE and Firefox*/
    _overflow:hidden;           /*Fix for IE6*/
    zoom:1;                     /*Turn on hasLayout*/
    *display:inline;            /*With hasLayout true display:inline behave like display:inline-block*/
}

Как видим код дублируется и это крайне непритно и не функционально. А так хочется иметь что то типа:

@display_inline {
    display:-moz-inline-stack;  /*Needed Firefox*/
    display:inline-block;       /*Don't used in IE and Firefox*/
    _overflow:hidden;           /*Fix for IE6*/
    zoom:1;                     /*Turn on hasLayout*/
    *display:inline;            /*With hasLayout true display:inline behave like display:inline-block*/
}
 
#body ul li {
     @inherit(display_inline)
}
 
#menu ul li {
     @inherit(display_inline)
}

Довольно удобно. По крайней мере искать стили нужных блоков стало куда легче.

Вот приблезительно как это выглядит:

/* Layouts (Placed within template order and incapsulation)
****************************************************************/
body {
height:100%;
line-height: 1;
color:#383838;
text-align:left;
background: url(img/bg.png) repeat;
}
	#container {
	background: url(img/bgTop2.png) repeat-x;
	height:100%;
	}
		#page {
		height:100%;
		margin: 0 auto;
		width:970px;
		}
			#head {
			height:140px;
			margin: 0 9px;
			background: transparent url(img/endoscope.jpg) no-repeat top left;
			}
				#top-menu {
				height:55px;
				text-align:right;
				padding-right:25px;
				}
				/*top-menu content**********************************/
						#top-menu a {
						text-decoration:none;
						font-family:Verdana, Arial;
						font-size:12px;
						color:#fff;
						overflow:hidden;
						cursor:pointer;
						display:block;
						}
						#top-menu div{
						width:116px;
						height:22px;
						background: transparent url(img/topBut.png) no-repeat 0px -25px;
						text-align:center;
						padding-top:7px;
						margin-right:5px;
						float:right;
						cursor:default;
						}
						#top-menu div:hover, #top-menu div.active {
						width:116px;
						height:22px;
						background: transparent url(img/topButActive.png) no-repeat 0px 0px;
						text-align:center;
						padding-top:32px;
						margin-right:5px;
						float:right;
						cursor:default;
						}
				/***********************************/
				#logo {
				margin-top:40px;
				width:600px;
				float:left;
				height:26px;
				overflow:hidden;
				}
				/*logo content**********************************/
						#logo a {
						text-decoration:none;
						}
						#logo img {
						border:0px;
						}
						#logo h1 {
						text-indent:-9999px;
						}
				/***********************************/
				#searchTop {
				margin-top:40px;
				margin-right:6px;
				float:right;
				width:300px;
				}
				/*searchTop content**********************************/
						#searchTop .field {
						float:left;
						background: url(img/searchField.jpg) no-repeat;
						}
						#searchTop input.hiddenField{
						background-color: transparent;
						border: solid 0px #FFF;
						padding:3px 5px 0 5px;
						height:23px;
						width:210px;
						color:#fff;
						}
						#searchTop input.hiddenField:focus{
						border: solid 0px #FFF;
						}
						#searchTop .button {
						float:right;
						}
				/***********************************/
			#shadow {
			background: transparent url(img/sh.png) repeat-y top left;
			height:100%;
			}
				#body {
				margin: 0 9px;
				background: #fff;
				padding:6px;
				float:left;
				height:100%;
				}
					#topBar  {
					width:940px;
					height:29px;
					background: transparent url(img/topBar.png) no-repeat top left;
					}
						/*topBar content**********************************/
								#topBarActions {
								float:right;
								color:#fff;
								margin: 10px 15px 0px 0px;
								font-size:10px;
								font-family:Verdana, Arial;
								}
								#topBarActions a{
								color:#ffffff;
								text-decoration:none;
								}
								#topBarActions a:hover{
								color:#ffffff;
								border-bottom:#fff 1px solid;
								}
								#topBarLocation {
								float:left;
								color:#fff;
								margin: 8px 0px 0px 35px;
								font-size:12px;
								font-family:Verdana, Arial;
								cursor:default;
								}
						/***********************************/
					#wrap {
					width:100%;
					height:100%;
					/*float:left;*/
					}
					#menuLeft {
					margin-top: 6px;
					width:246px;
					clear:none;
					float:left;
					height:100%;
					}
					#content {
					margin: 6px 0px 0px 6px;
					clear:none;
					float:left;
					width:688px;
					height:100%;
					background:#ccc;
					}
					#articleBg {
					background:transparent url(img/articleBodyBg.png) repeat-y;
					height:100%;
					}
						#articleTop{
						background:transparent url(img/articleTopBg.png) no-repeat;
						height:100%;
						}
							#articleTop #article{
							font-family:Times New Roman;
							font-size:16px;
							padding:30px 40px 30px 50px;
							text-align:justify;
							line-height:18px;
							/*height:600px;
							display:list-item;*/
							width:588px;
							height:100%;
							}

					#articleOnlyTop {
					background:transparent url(img/articleOnlyTopBg.png) no-repeat;
					height:100%;
					width:940px;
					}
						#articleOnlyTop #article{
						font-family:Times New Roman;
						font-size:16px;
						padding:30px 50px 30px 50px;
						text-align:justify;
						line-height:18px;
						width:840px;
						height:100%;
						}

Так как нам нужна красивая кнопочка, то одним слоем картинки никак не обойтись. Нужно как минимум 4 слоя. Три для картинок и один для текста.
Суть всего этого такова:
1-й слой – это повторяющийся бекграунд.
2-й слой – это прозрачная картинка которая привязывается к верхушке кнопки.
3-й слой – это прозрачная картинка которая привязывается к низу кнопки.
4-й слой – это собственно текст кнопки.
Проблемы:

Проблема первая
Все как всегда упирается в IE. Так уж вышло что псевдокласс :hover (который кстати присутствует с CSS 1.0) работает только на элементе <a> и на другие не распространяется. По этому, что бы оживить кнопку при наведении мышки мы оборачиваем ее в елемент <a>.

Когда наша кнопочка не выбрана она имеет класс “none” иначе “active”.

Проблема вторая
И снова IE. В отличии от Firefox и Chrome, в IE padding не увеличивает размер div’a.  По этому в CSS добавил reference-хак который для Firefox и Chrome сжимает длинну кнопки на 30px, которые мы добавили используя padding, а для IE оставляет все как есть.

Посути все очень просто) Главное не забывать, что где-то там во тьме всегда существует злой IE, который так и наровит выкинуть что-то эдакое.

P.S. Не забываем подгружать картинки для кнопочек до их инициализации.

Код кнопочки:

Пример работы