Reduce the repeat codes in css

Question

Designing a header. This is what it should like

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

The css has to many properties being repeated here. If you see display: block; float: left; margin: 1% 0 1% 1.6%; being repeated 6-7 time. Is there a way to effectively write the css reducing the amount of repeat?.

Answer 1

make use of a class can reduce your code

.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

You only need few css rules to achieve that markup, like below, applying same rule to different elements with comma separation can really reduce the code

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%; }

Here is a fiddle

Answer 3

Use SASS or LESS. Writing CSS using one of these frameworks can significantly reduce the amount of code you have to write by hand.