8个css技巧 帮助你减少重复规则和复写

8个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

1、使用CSS重置（reset）

css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

*{
 box-sizing:border-box;
 margin:0;
 padding:0
 }

使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

2、继承盒模型

让盒模型从html 继承：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

html {    
    box-sizing: border-box;  
}    
*, *:before, *:after {    
    box-sizing: inherit;  
}

3、使用flexbox布局来避免margin的问题 （Get Rid of Margin hacks width Flexbox）

当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题 ，可以使用flexbox 的space-between 属性值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

.flex-container{
  display:flex;
  justify-content:space-between;
}
.flex-container .item{              
  flex-basis:23%;
}

4、使用:not() 解决lists边框的问题

在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则 解除最后一个link的border文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！ 当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易理解的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

5 body上加入line-height样式

导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。行间距（line-height）可以作为 给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

body {    
    line-height: 1.5;  
}

请注意，这里的声明没有单位，我们只是告诉浏览器 让它渲染行高是 渲染字体大小的1.5倍文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

6垂直居中任何元素 (vertical-center anything)

在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

html, body {    
    height: 100%;    
    margin: 0;  
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex;    
    display: flex;  
}

这里会详细的介绍所有可以垂直居中的方法 ：http://webdesignerwall.com/tutorials/css-vertical-centering-everything-need-know文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

7 使用SVG icons

SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件 丢弃。FontAwsome5中 也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

.logo {    
    background: url("logo.svg");  
}

温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

.no-svg .icon-only:after {    
    content: attr(aria-label);  
}

8使用 “OWL选择器”

使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html

* + * {    
    margin-top: 1.5rem;  
}

这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/3215.html