CSSのリピートコードを減らす

Question

ヘッダーをデザインする。これは、それが好きべきものである

HTML

<header> 
    <div id="primary-header"> 
     <div id="logo">logo</div> 
     <div id="social-media">social media</div> 
     <div id="search">You search here</div> 
     <div id="login">Login</div> 
    </div> 
    <div id="secondary-header"> 
     <div id="category">for category</div> 
     <div id="menu">If you have menu</div> 
     <div id="cart">well another column, add a cart</div> 
    </div> 
</header> 

CSS

#primary-header, #secondary-header {clear: both; margin: 0; padding: 0;} 
#primary-header::before, #secondary-header::before, 
#primary-header::after, #secondary-header::after { content: ""; display: table; } 
#primary-header::after, #secondary-header::after { clear: both; } 

#logo { display: block; float: left; margin: 1% 0 1% 1.6%; margin-left:0; width: 15.33%;} 
#social-media { display: block; float: left; margin: 1% 0 1% 1.6%; width: 6.86%; } 
#search {display: block; float: left; margin: 1% 0 1% 1.6%; width: 49.2%;} 
#login {display: block; float: left; margin: 1% 0 1% 1.6%; width: 23.8%;} 
#category {display: block; float: left; margin: 1% 0 1% 1.6%; margin-left:0; width:15.33%} 
#menu{display: block; float: left; margin: 1% 0 1% 1.6%; width:57.66%} 
#cart {display: block; float: left; margin: 1% 0 1% 1.6%; width:23.8%} 

JSFiddle

CSSには、ここで繰り返される多くのプロパティがあります。もしあなたがdisplay: block; float: left; margin: 1% 0 1% 1.6%;が6-7回繰り返されているのを見たら。効果的に反復の量を減らすCSSを書く方法がありますか？

Answer 1

クラスのメーク使用は

.item { display: block; float: left; margin: 1% 0 1% 1.6%; } 

#logo {margin-left:0; width: 15.33%;} 
#social-media { width: 6.86%; } 
#search { width: 49.2%;} 
#login { width: 23.8%;} 
#category { margin-left:0; width:15.33%} 
#menu{ width:57.66%} 
#cart {width:23.8%} 



<header> 
    <div id="primary-header"> 
     <div class="item" id="logo">logo</div> 
     <div class="item" id="social-media">social media</div> 
     <div class="item" id="search">You search here</div> 
     <div class="item" id="login">Login</div> 
    </div> 
    <div id="secondary-header"> 
     <div class="item" id="category">for category</div> 
     <div class="item" id="menu">If you have menu</div> 
     <div class="item" id="cart">well another column, add a cart</div> 
    </div> 
</header> 

Answer 2

あなたはだけは本当にコードを減らすことができ、コンマ分離と異なる要素に同じルールを適用し、以下のように、そのマークアップを達成するために、いくつかのCSSルールを必要とするあなたのコードを減らすことができ

ここで

div#primary-header div, div#secondary-header div { 
    display: inline-block; 
    text-align:center; 
} 
#logo, #category{ width: 15%; } 
#social-media{ width:10%; } 
#search{ width:40%; } 
#login{ width:20%; } 

はSASSまたはLESSfiddle

Answer 3

の使用です。これらのフレームワークの1つを使用してCSSを書くと、手作業で書く必要のあるコードの量を大幅に減らすことができます。

Answer 4

あなたは 'div'を使用していますので、 'display：block'は超過しています。さらに、 'float：left/right'はデフォルトで 'display：block'を追加します。 Look here。