减少css中的重复代码

Question

设计标题。这就是它应该的样子

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<Context antiResourceLocking="false" privileged="true" >
<!--
  <Valve className="org.apache.catalina.valves.RemoteAddrValve"
         allow="127\.\d+\.\d+\.\d+|::1|0:0:0:0:0:0:0:1" />
  <Manager sessionAttributeValueClassNameFilter="java\.lang\.(?:Boolean|Integer|Long|Number|String)|org\.apache\.catalina\.filters\.CsrfPreventionFilter\$LruCache(?:\$1)?|java\.util\.(?:Linked)?HashMap"/>
-->
</Context>

CSS

<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>

JSFiddle

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%} 被重复了6-7次。有没有办法有效地写css减少重复次数？。

Answer 1

使用类可以减少代码

stack

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

这是fiddle

Answer 3

使用SASS或LESS。使用其中一个框架编写CSS可以显着减少您手动编写的代码量。