【译】整理->20个让你效率更高的CSS代码技巧

时间 2019-11-29

标签整理让你效率高的 css 代码技巧栏目 CSS 繁體版

原文原文链接

译者：果冻cc
原文连接： tutorialzine.com/2016/08/20-…

在本文中，咱们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的，有一些知识点是进阶型的。但愿每一个人经过这篇文章都能学到对本身有用的知识。javascript

好了，咱们开始。css

1.注意外边距折叠

与其余大多数属性不一样，上下的垂直外边距margin在同时存在时会发生外边距折叠。这意味着当一个元素的下边缘接触到另外一个元素的上边缘时，只会保留两个margin值中较大的那个。例如：html

HTMLjava

<div class="square red"></div>
<div class="square blue"></div>复制代码

CSSgit

.square {
    width: 80px;
    height: 80px;
}
.red {
    background-color: #F44336;
    margin-bottom: 40px;
}
.blue {
    background-color: #2196F3;
    margin-top: 30px;
}复制代码

红色方块与蓝色方块的上下间距是40px，而不是70px。解决外边距折叠的方法有不少种，对于初学者来讲最简单的就是全部元素只使用一个方向上的margin，好比上下的外边距咱们通通使用margin-bottom。github

2.使用flex进行布局

flex弹性布局的出现是有缘由的。浮动和inline-block虽然也能实现不少的布局效果，但它们本质上是文本和块元素布局的工具，而不是面向整个网页的。flex能够很容易的按照咱们预期的方式建立布局。npm

flex拥有一组面向“弹性容器”的属性和一组面向“弹性项目”的属性，一旦你学会了它们，作任何响应式布局都是小菜一碟。目前各种浏览器的最新版本对flex的支持性也是没有任何问题的，因此你应该多多使用flex布局。编程

.container {
    display: flex;
}复制代码

3.重置元素的CSS样式

尽管这些年来有了很大的改善，可是不一样浏览器对于各类元素的默认样式仍然存在很大的差别。解决这个问题的最佳办法是在CSS开头为全部的元素设置通用的CSS Reset重置代码，这样你是在没有任何默认内外边距的基础上进行布局，因而所产生的效果也就是统一的。浏览器

网络上已经有成熟的CSS代码库为咱们解决浏览器不一致问题，例如normalize.css、minireset和ress，你能够在你的项目中引用它们。若是你不想使用第三方代码库，你可使用下面的样式来进行一个很是基本的CSS reset：网络

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}复制代码

上面的代码看起来有些霸道，将全部元素的内外边距都设置为0了，而正是没有了这些默认内外边距的影响，使得咱们后面的CSS设置会更加的容易。同时box-sizing: border-box也是一个很棒的设置，咱们紧接着就会介绍它。

4.全部元素设置为Border-box

大多数初学者都不知道box-sizing这个属性，但实际上它很是重要。box-sizing属性有两个值：

content-box（默认） - 当咱们设置一个元素的宽度或高度时，就是设置它的内容的大小。全部的padding和边框值都不包含。例如，一个div的宽度设置为100，padding为10，因而这个元素将占用120像素（100+2*10）。
border-box - padding与边框包含在元素的宽度或高度中，一个设置为width: 100px和box-sizing:
border-box的div元素，他的总宽度就是100px，不管它的内边距和边框有多少。

将全部元素都设置为border-box，能够更轻松的改变元素的大小，而没必要担忧padding或者border值会将元素撑开变形或者换行显示。

5.将图片做为背景

当给页面添加图片时，尤为须要图片是响应式的时候，最好使用background属性来引入图片，而不是<img>标签。

这看起来使用图片会更复杂，但实际上它会使设置图片的样式变得更加容易。有了background-size, background-position和其它的属性，保持或改变图片原始尺寸和宽高比会更方便。

举个例子
HTML

<section>
    <p>Img element</p>
    <img src="https://tutorialzine.com/media/2016/08/bicycle.jpg" alt="bicycle">
</section>

<section>
    <p>Div with background image</p>
    <div></div>
</section>复制代码

CSS

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

div {
    width: 300px;
    height: 200px;
    background: url('https://tutorialzine.com/media/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}

section{
    float: left;
    margin: 15px;
}复制代码

background引入图片的一个缺点是页面的Web可访问性会受到轻微的影响，由于屏幕阅读器和搜索引擎没法正确地获取到图像。这个问题能够经过CSS object-fit属性解决，到目前为止除了IE浏览器其余的浏览器均可以使用object-fit。

6.更好的表格边框

HTML中的表格老是很难看的。它们很难作成响应式的，并且整体上很难改变样式。例如，若是要向表格及其单元格添加简单的边框，则最可能的结果是：

如你所见，有不少重复的边框，看起来很很差看。这里有一个快速的方法来删除全部的双倍边框：border-collapse: collapse，只需设置这个属性后，表格的边框看起来就顺眼多了：

7.更友好的注释

CSS也许不是一种编程语言，但其代码仍然须要文档化。添加一些简单的注释能够将代码分类区分，方便本身和同过后期维护。

对于大的区域划分或者重要的组件可使用下面的注释样式：

/*--------------- #Header ---------------*/
header { }

header nav { }

/*--------------- #Slideshow ---------------*/
.slideshow { }复制代码

对于细节和不过重要的样式可使用单行的注释方式：

/* Footer Buttons */
.footer button { }

.footer button:hover { }复制代码

另外，请记住，CSS中没有//注释，只有/**/注释：

/* 正确 */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}

/* 错误 */
p {
    padding: 15px;
    // border: 1px solid #222; 
}复制代码

8.短横线命名

当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，所以不能使用驼峰式命名。一样，CSS中也不建议使用下划线链接的命名方式。

/* 正确 */
.footer-column-left { }

/* 错误 */
.footerColumnLeft { }

.footer_column_left { }复制代码

当涉及到命名时，您还能够考虑BEM，它遵循一组原则，提供基于组件并增长一致性的开发方法。

9.不要重复设置

大多数CSS属性的值都是从DOM树中向上一级的元素继承的，所以才被命名为级联样式表。以font属性为例-它老是从父级继承的，您没必要为页面上的每一个元素都单独设置。

只需将要设置的字体样式添加到<html>或<body>元素中，而后让它们自动向下继承。

html {
    font: normal 16px/1.4 sans-serif;
}复制代码

而后咱们就能够统一的一次改变页面上全部的文字样式了。固然，CSS中并非全部的属性都是可继承的，对于这些属性咱们仍然须要在每一个元素上单独设置。

10.使用transform属性来建立动画

最好使用transform()函数来建立元素的位移或大小动画，尽可能不要直接改变元素的width，height以及left/top/bottom/right属性值。

下面的例子中，咱们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性。

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}

/* 不建议 */
.ball.slide-out {
    left: 500px;
}

/* 建议 */
.ball.slide-out {
    transform: translateX(450px);
}复制代码

transform以及它的全部函数（translate, rotate, scale等）几乎没有浏览器兼容性问题，能够随意使用。

11.不要DIY，多使用代码库

CSS社区很是庞大，不断有新的代码库出现。它们有各类用途，从微小的片断到构建响应式应用程序的总体框架。其中大多数也是开源的。

下一次当你面对一个CSS问题时，在你试图费尽全力解决它以前，检查一下Github或Codepen上是否已经有了一个可用的解决方案。

12.保持选择器的低权重

css的选择器并不都是平等的。当初学习CSS时，我老是认为选择器会覆盖它上面的全部内容。然而，状况并不是如此，就如咱们在下面的示例中所说明的：

HTML

<a href='#' id='blue-btn' class="active">按钮</a>复制代码

CSS

a{
    color: #fff;
    padding: 15px;
}
a#blue-btn {
    background-color: blue;
}
a.active {
    background-color: red;
}复制代码

咱们但愿.active类中设置的样式会生效使按钮变为红色。可是它并不会起做用，由于按钮在上面有一个ID选择器，它一样设置了background-color，ID选择器具备更高的权重，因此按钮的颜色是蓝色的。选择器的权重大小规格以下：

ID (#id) > Class (.class) > Type (例如 header)复制代码

权重也会叠加，因而a#button.active的权重要比a#button的高。一开始就使用高权重的选择器会致使你在后面的维护中不断的使用更高权重的选择器，最终选择使用!important，这是很是不推荐的，具体的缘由紧接着就会讲到。

13.不要使用!important

说真的，不要使用!important。如今看起来能够快速的解决问题，但最终可能会致使大量的重写。相反，咱们应该花点时间找到CSS选择器不工做的缘由并更改它。

惟一可使用的!important的地方是当您想要覆盖HTML中的内联样式时，可是内联样式一样也是一个坏的习惯，应该尽可能的避免。

14.使用text-transform转换字母为大写

本条适用于英文环境，不适合中文

在HTML中，能够将某个单词所有写为大写字母来表达强调的含义。好比：

<h3>Employees MUST wear a helmet!</h3>复制代码

若是你须要将某段文字所有转化为大写，咱们能够在HTML中正常书写，而后经过CSS来转化。这样能够保持上下文内容的一致性。

<div class="movie-poster">Star Wars: The Force Awakens</div>复制代码

.movie-poster {
    text-transform: uppercase;
}复制代码

15.Em, Rem与px

设置元素与文本的大小应该用哪一种单位，em，rem，仍是px？一直以来都有不少的争论。事实是，这三种选择都是可行的，都有其利弊。

在何时在什么项目使用哪一种单位是没有一个定论的，开发人员的习惯不一样，项目的要求不一样，均可能会使用不一样的单位。然而，虽然没有固定的规则，可是每种单位仍是有一些要注意的地方的：

em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，可是因为em单位在每一级中都是相对于父元素进行计算的，因此要得出某个子元素em单位对应的px值，有时候是很麻烦的。
rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的全部标题和段落文本大小变得很是容易。
px - 像素单位是最精确的，可是不适用于自适应的设计。px单位是可靠的，而且易于理解，咱们能够精细的控制元素的大小和移动到1px。

最重要的是，不要惧怕尝试，尝试全部方法，看看最适合什么。有时候，em和rem能够节省不少工做，尤为是在构建响应式页面时。

16.对于大型项目使用预处理器

你必定据说过它们 - Sass, Less, PostCSS, Stylus。预处理器是CSS的将来。它们提供诸如变量、CSS函数、选择器嵌套和许多其余很酷的功能，使CSS代码更易于管理，特别是在大型项目中。

举个简单的例子，下面是一个SASS代码的片断，它使用到了一些CSS变量和函数：

$accent-color: #2196F3;
a {
    padding: 10px 15px;
    background-color: $accent-color;
}
a:hover {
    background-color: darken($accent-color,10%);
}复制代码

预处理器的惟一的不足之处是它们任然须要编译成普通的CSS。而CSS推出的自定义属性则是真正意义上的预处理。

17.使用AutoPrefixer达到更好的兼容性

浏览器前缀是CSS中最烦人的事情之一，每一个属性须要的前缀是不一致的，你永远不知道到底须要哪个，若是真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。

值得庆幸的是，有工具能够自动为咱们提供添加浏览器前缀的功能，甚至能够决定须要支持哪些浏览器：

在线工具：Autoprefixer
文本编辑器插件：Sublime Text, Atom
代码库：Autoprefixer (PostCSS)

18.压缩CSS文件

为了提升网站和应用程序的加载速度和页面负载，您应该使用压缩后的资源。压缩版本的文件将删除全部空白和重复，从而减小总文件的体积。固然，这个过程也会使样式表彻底不可读，因此要在生产环境中使用.min版本，同时为开发保留常规版本。

有许多不一样的方法来压缩CSS代码：

在线工具：CSS Minifier, CSS Compressor
文本编辑器插件： Sublime Text, Atom
代码库： Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)

根据您的工做流程，可使用上述任何一种方式。

19.Caniuse

对于CSS的属性Web浏览器仍然存在许多兼容性不一致的地方。使用caniuse来检查您使用的属性是否获得了普遍的支持？是否须要前缀？或者是否在某个浏览器中使用有要注意的地方？有了caniuse你在写CSS时就会更驾轻就熟了。

20.验证

验证CSS可能不像验证HTML或JavaScript代码那么重要，可是经过工具运行一下你的代码仍然很是有用。它会告诉你是否犯了任何错误，警告错误的用法，并为您提供改进代码的提示。

就像压缩和Autoprefixer同样，有免费的工具能够利用：

在线工具：W3 Validator, CSS Lint
文本编辑器插件：Sublime Text, Atom
代码库：stylelint (Node.js, PostCSS), css-validator (Node.js)