CSS概念：现代CSS代码高性能 Flexbox Reset Em, Rem, Pixel !important

不要重复造轮子

现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。
这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。
所以如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。

明白何谓Margin Collapse

.square {
    width: 80px;
    height: 80px;
}
.red {

background-color: #F44336;

margin-bottom: 40px;

}
.blue {

background-color: #2196F3;

margin-top: 30px;

}

在上述例子中我们会发现，红色和蓝色方块的外边距并没有相加得到70px，而是只有红色的下外边距保留了下来。我们可以使用一些方法来避免这种行为，不过建议来说还是尽量统一使用margin-bottom属性，这样就显得和谐多了。

一切应为Border-box

默认值为content-box，即当我们设置某个元素的heght/width属性时，仅仅会作用于其内容尺寸。而所有的内边距与边都是在其之上的累加，
譬如某个
标签设置为宽100，内边距为10，那么最终元素会占用120(100 + 2*10)的像素。
border-box:内边距与边是包含在了width/height之内，譬如设置了width:100px的
无论其内边距或者边长设置为多少，
其占有的大小都是100px。

将元素设置为border-box会很方便你进行样式布局，这样的话你就可以在父元素设置高宽限制而不担心子元素的内边距或者边打破了这种限制。

以背景图方式使用Images

如果需要在响应式的环境下展示图片，有个简单的小技巧就是使用该图片作为某个

的背景图而不是直接使用img标签。基于这种方式配合上background-size与background-position这两个属性，可以很方便地按比例缩放:

img {
    width: 300px;
    height: 200px;
}
div {

width: 300px;

height: 200px;

background: url('http://cdn.tutorialzine.com/wp-content/uploads/2016/08/bicycle.jpg');

background-position: center center;

background-size: cover;

}
section{

float: left;

margin: 15px;

}

使用Flexbox进行布局

CSS实战之Flex详解以及其在微信中的兼容实现
在传统的布局中我们习惯使用Floats或者inline-blocks，不过它们更适合于格式化文档，而不是整个网站。而Flexbox则是专门的用于进行布局的工具。Flexbox模型允许开发者使用很多便捷可扩展的属性来进行布局，估计你一旦用上就舍不得了:

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */display: -webkit-flex;
}

我们已经在Tutorialzine上提供了很多的关于Flexbox的介绍与小技巧，譬如5 Flexbox Techniques You Need to Know About。

使用CSS Reset

虽然这些年来随着浏览器的迅速发展与规范的统一，浏览器特性碎片化的情况有所改善，但是在不同的浏览器之间仍然存在着很多的行为差异。而解决这种问题的最好的办法就是使用某个CSS Reset来为所有的元素设置统一的样式，保证你能在相对统一干净的样式表的基础上开始工作。目前流行的Reset库有 normalize.css,minireset以及 ress ，它们都可以修正很多已知的浏览器之间的差异性。而如果你不打算用某个外在的库，那么建议可以使用如下的基本规则:

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

上面的规则看起来没啥用，不过如果不同的浏览器在默认情况下为你设置了不同的外边距/内边距的默认值，还是会挺麻烦的。

Better Table Borders
注释格式优化
使用Kebab-case命名变量

/*  Do     */
.footer-column-left { }
/  Don't  /

.footerColumnLeft { }
.footer_column_left { }

对于样式类名或者ID名的命名都需要在多个单词之间添加-符号，CSS本身是大小写不敏感的因此你是用不了camelCase的，另一方面，很久之前也不支持下划线，所以现在的默认的命名方式就是使用-

避免重复代码
大部分元素的CSS属性都是从DOM树根部继承而来，这也是其命名为级联样式表的由来。我们以font属性为例，该属性往往是继承自父属性，因此我们并不需要再单独地为元素设置该属性。
使用transform添加CSS Animations

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}/* Not Cool*/.ball.slide-out {
    left: 500px;
}/* Cool*/.ball.slide-out {
    transform: translateX(450px);
}

不建议直接改变元素的width与height属性或者left/top/bottom/right这些属性来达到动画效果，而应该优先使用transform()属性来提供更平滑的变换效果，并且能使得代码的可读性会更好

不要重复造轮子
现在CSS社区已经非常庞大，并且不断地有新的各式各样的库开源出来。这些库可以帮助我们解决从小的代码片到用于构建完整的响应式应用的全框架。

如果下次你再碰到什么CSS问题的时候，在打算撸起袖子自己上之前可以尝试在GitHUB或者CodePen上搜索可行方案。

尽可能使用低优先级的选择器

并不是所有的CSS选择器的优先级都一样，很多初学者在使用CSS选择器的时候都是考虑以新的特性去复写全部的继承特性，不过这一点在某个元素多状态时就麻烦了，譬如下面这个例子:

a{
    color: #fff;
    padding: 15px;
}
a#blue-btn {

background-color: blue;

}
a.active {

background-color: red;

}

我们本来希望将.active类添加到按钮上然后使其显示为红色，不过在上面这个例子中很明显起不了作用，因为button已经以ID选择器设置过了背景色，也就是所谓的Higher Selector Specificity。一般来说，选择器的优先级顺序为：ID(#id) > Class(.class) > Type(header)

避免使用!important
使用text-transform属性设置文本大写


.movie-poster {

text-transform: uppercase;

}

在生产环境下使用Minified代码
为了提升页面的加载速度，在生产环境下我们应该默认使用压缩之后的资源代码。在压缩的过程中，会将所有的空白与重复剔除掉从而减少整个文件的体积大小。当然，经过压缩之后的代码毫无可读性，因此在开发阶段我们还是应该使用普通的版本。
使用Autoprefixers来提升浏览器兼容性
在大型项目中使用预处理器

$accent-color: #2196F3;
a {

padding: 10px 15px;

background-color: $accent-color;

}
a:hover {

background-color: darken($accent-color,10%);

}

1in = 96px，3pt = 4px，25.4mm = 96px等。

文本相对长度单位：em

相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

Outer inner outer
body { font-size: 62.5%; }
span { font-size: 1.6em; }

结果：外层为 body 字体 10px 的 1.6倍 = 16px，内层为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。

明显地，内部内的文字受到了父级的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。(要是嵌套计算了更麻烦不如rem)

文本相对长度单位：rem

rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小.

作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，以前的天猫tmall就使用这种办法

in > cm > pc > pt > px (3pt = 4px)

pt
绝对长度单位。点（Point）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc
绝对长度单位。派卡（Pica）。相当于我国新四号铅字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

究竟有什么区别呢？

首先要明白一点，那就是屏幕分辨率。我们知道，在不同的分辨率下，像素点的大小是不同的。所以同一个网页，以px作长度单位时，在不同的分辨率下显示的大小是不同的。在低分辨率下，像素点较大，细节不够清晰，显示的页面也大，但模糊不清。

实际上,所有的单位,无论是相对还是绝对单位,最终都是转化为px为单位的---在屏幕上的显示。所以一般来说，在网页制作时，基本单位都选择px而不是pt，因为pt也是通过浏览器的DPI转换成px显示（比如FireFox的DPI是96，则有9pt = 12px）。不仅pt，cm/in/mm等都是转换成px的。所以无论用绝对还是相对，在不同分辨率下都是会变的。不要以为我把长度设置为3cm，它就会在不同的分辨率下保持3cm不变。

那又为什么出现绝对单位和相对单位呢?

我觉得pt还是很有用的一个单位，在打印时尤其如此。现在有的网页已经实现了显示是一个页面，打印用另一种方式，我想在打印上采用的就是pt吧，因为针对不同的分辨率，打印出来的页面都是一样的大小。这就是绝对单位的第一个特征。但是依然要记住，在显示上，这个单位代表的不是真实的物理长度，它也是要根据像素的实际大小（这个跟分辨率有关）进行调整的。

CSS概念：现代CSS代码高性能 Flexbox Reset Em