html - 减少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;向左飘浮; 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>