提拔你的CSS技能的20个css技巧

随着前端开发越来越关注效力：通过选中器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处置器在工作的时候，需要绕的路较长，而直接使用css速度会更快。

这里涵盖了20个css技巧来帮忙你减少反复规则和复写，在规划中标准化样式流程，不仅可以帮忙你高效地创立本人的框架，并且可以解决很多常见的问题。

1、使用CSS重置（reset）

css重置库如normalize.css已经被使用许多年了，它们可认为你的网站样式供给一个比力清楚的标准，来确保跨阅读器之间的一致性。

大多数项目并不需要这些库包括的所有规则，可以通过一条简便的规则来利用于规划中的所有元素，删除所有的margin、padding改动阅读器默许的盒模型。

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

使用box-sizing声明是可选中，假如你使用下面继承的盒模型情势可以跳过它。

2、继承盒模型

让盒模型从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 属性值。

.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

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

这是一种很纷乱的方式，它不仅强迫阅读器以一种方式渲染，然后又通过特定的选中器来撤销它。这样覆盖样式是不成幸免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

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

上面就是，除了最后一个li之外，所有的 .nav li 都加上了border样式，是不是很简便！

当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是 ：not是更有语义化（semantic）和容易懂得的。

5、body上参加line-height样式

致使低样式效力（inefficient stylesheets）的一件事就是不竭的反复声明。最好是做下项目计划和组合规则，这样CSS会更流畅。实现这一点，就需要我们懂得级联（cascade）,乃至怎样在通用选中器写的样式可以继承在其他地方。

行间距（line-height）可以作为给你的整个项目设定的一个属性，不仅可以减小代码量，并且可以让你的网站的样式给一个标准的外不雅

body {
    line-height: 1.5;
}

请留意，这里的声明没有单位，我们只是告诉阅读器 让它渲染行高是 渲染字体大小的1.5倍

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

在没有预备使用CSSGrid 规划的时候，设定垂直居中规划的全局规则是一个很好的方式，可认为文雅（elegantly）的设定内容规划奠定一个根基

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

7、使用SVG icons

SVG使用于所有辨论类，并且所有阅读器也都支撑。所以可以将.png .jpg .gif 等文件 抛弃。FontAwsome5中 也供给了SVG的图标字体。设定SVG的格局就跟其他图片类型一样：

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

温馨提醒：假如将SVG用在可交互的元素上比方说button，SVG 会发生没法加载的问题。可以通过下面这个规则来确保SVG可以拜访到（确保在HTML中已设定恰当的aria属性）

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

8、使用 “OWL选中器”

使用通用选中器（universal selector）* 和相邻的兄弟选中器（adjacent sibling selector）+ 可以供给一个强大的的CSS功效，给紧跟其他元素中的文档流中的所有元素设定统一的规则

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

这是一个很棒的技巧，可以帮你创立愈加平均的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比方说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px）

9、一致的垂直构造（Consistent Vertical Rhythm）

一致的垂直节拍供给了一种视觉美学，使内容更具可读性。假如owl选中器过于通用，请在元素内使用通用选中器（*）为规划的特定部分创立一致的垂直节拍：

.intro > * {   
   margin-bottom: 1.25rem;  
}

10、对更美丽的换行文本使用 box-decoration-break

假设您但愿对换行到多行的长文本行利用统一的间距、边距、突出显示或背风光，但不但愿整个段落或标题看起来像一个大块。Box Decoration Break属性同意您仅对文本利用样式，同时保持填充和页边距的完全性。

假如要在悬停时利用突出显示，或在滑块中设定子文本样式以具有突出显示的外不雅，则此功效特别有用：

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

内联块声明同意将色彩、背景、页边距和填充利用于每行文本，而不是整个元素，克隆声明白保将这些样式平均地利用于每行。

11、等宽表格单元格

表格大概很难处置，所以尝试使用table-layout：fixed来保持单元格相等宽度：

.calendar {    
    table-layout: fixed;  
}

12、强迫使用属性选中器显示空链接

这关于通过CMS插入的链接特殊有用，CMS平常不具有类属性，并帮忙您在不影响级联的状况下对其停止特定样式设定。例如，<a>元素没有文本值，但href属性有一个链接：

a[href^="http"]:empty::before {    
    content: attr(href);  
}

13、样式“默许”链接

说到链接样式，您可以在几乎每个样式表中寻到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，大概会致使您的主链接样式比按钮文本色彩更容易显现问题。

尝试这种较少干扰的方式为“默许”链接增加样式：

a[href]:not([class]) {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

14、比率框

要创立具有固有比率的框，您需要做的就是将顶部或底部填充利用于div：

.container {    
    height: 0;    
    padding-bottom: 20%;    
    position: relative;  
}    
.container div {    
    border: 2px dashed #ddd;    
    height: 100%;    
    left: 0;    
    position: absolute;    
    top: 0;    
    width: 100%;  
}

使用20％停止填充使得框的高度等于其宽度的20％。不管视口的宽度怎样，子div都将保持其纵横比（100％/ 20％= 5：1）。

15、风格破裂的图像

这个技巧不是关于代码缩减，而是关于细化设计细节的。破裂的图像发生的缘由有许多，要末不雅观不雅，要末致使纷乱（只是一个空元素）。用这个小小的CSS创立更美妙的结果：

img {    
    display: block;    
    font-family: Helvetica, Arial, sans-serif;    
    font-weight: 300;    
    height: auto;    
    line-height: 2;    
    position: relative;    
    text-align: center;    
    width: 100%;  
}
img:before {    
    content: "We're sorry, the image below is missing :(";    
    display: block;    
    margin-bottom: 10px;  
}    
img:after {    
    content: "(url: " attr(src) ")";   
    display: block;    
    font-size: 12px;  
}

16、使用rem停止全局大小调整；使用em停止部分大小调整

在设定根名目的根本字体大小后，例如html字体大小：15px；，可以将包括元素的字体大小设定为rem:

article {    
    font-size: 1.25rem;  
}    
aside {    
    font-size: .9rem;  
}

然后将文本元素的字体大小设定为em

h2 {    
    font-size: 2em;  
}    
p {    
    font-size: 1em;  
}

此刻，每个包括的元素都变得分区化，更易于样式化、更易于保护和灵敏。

17、潜藏未静音的主动播放视频

当您处置没法从源代码轻松操纵的内容时,这关于自定义会员样式表来说是一个很好的技巧。这个技巧将帮忙您幸免在加载页面时主动播放视频中的声音干扰拜访者，并再次供给了出色的：not（）伪选中器：

video[autoplay]:not([muted]) {    
    display: none;  
}

18、灵敏使用root类型

响应规划中的字体大小应当能够主动调整到视区，从而留存编写媒体查询的工作，以处置字体大小。可以使用:not和视区单位，按照视区高度和宽度运算字体大小：

:root {    
    font-size: calc(1vw + 1vh + .5vmin);  
}

此刻，您可以使用根em单位，该单位基于:not：

body {    
    font: 1rem/1.6 sans-serif;  
}

结合上面的rem/em技巧以获得更好的操纵。

19、在表单元素上设定字体大小，以获得更好的移动体验

为了不移动阅读器（iOS Safari等）在点击<select>下拉列表时放大HTML表单元素，请在增加font-size样式：

input[type="text"],  
input[type="number"],  
select,  
textarea {    
    font-size: 16px;  
}

20、CSS变量

最后，最强大的CSS级别来自于CSS变量，它同意您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你大概有一套色彩在整个项目中使用，以保持一致性。

在CSS中重复反复这些色彩值不仅是件烦人的事情，并且还容易出错。假如某个色彩在某个时刻需要改动，你就不得不去寻觅和更换，这是不成靠或不快速的，当为终究会员构建产品时，变量使得定制变得容易得多。例如：

:root {
  --main-color: #06c;
  --accent-color: #999;
}

h1, h2, h3 {
  color: var(--main-color);
}
a[href]:not([class]),
p,
footer span{
 color: var(--accent-color);
}