加速CSS开发的7个技巧

2017-11-06 10:57

作为一名开发人员，始终在考虑如何使您的工作流程和流程更加高效，这一点非常重要。一种方法是编写较少的CSS; 使其更简洁。这样做，你将能够更快地完成你的项目。您还将减少加载时间，并使将来的编辑更易于管理。

另一种加速开发的方法是使用工具，使其更快，更容易编码。这包括文本编辑器，预处理器和像Emmet这样的插件，可以帮助改进工作流程。

这些技巧中的大部分都非常简单，可以加速您的CSS开发。

使用CSS预处理器，如Sass

Sass等预处理器允许您使用CSS中当前不可用的功能。这包括变量，嵌套，混合和继承。在Sass中使用这些特性可以产生与传统CSS相同的输出，但是编写的代码要少得多。这意味着你可以写这样的东西，例如：

$ font-stack：Helvetica，sans-serif

$原色：＃333

身体

font：100％$ font-stack

颜色：$原色

在这种情况下发生的事情是字体和原色在CSS文件的顶部被确定一次。从这里开始，只需输入$ font-stack或$ primary-color就可以取得这个值。它可以一次又一次地保存输入值，还可以通过编辑原始变量来更新所有实例。

这是从这个Sass代码示例生成的输出：

身体 {

字体：100％Helvetica，sans-serif;

颜色：＃333;

}

使用CSS速记

速记是指使用简化和更短的方式来产生相同的CSS输出。最常见的例子是可以简化边距和填充的方式：

margin-top：10px;

margin-right：5px;

margin-bottom：15px;

margin-left：10px;

至：

margin：10px 5px 15px 10px;

大多数开发人员使用简写元素。但是，有一些不太知道的例子可以加快发展。这些包括：

1.字体

font-style：italic;

font-weight：bold;

font-size：.5em;

line-height：2;

font-family：Arial，sans-serif;

...可以缩短为：

font：italic bold .5em / 2 Arial，sans-serif;

2.概述

outline-width：1px;

大纲样式：坚固;

轮廓颜色：＃111;

...可以缩短为：

大纲：1px固体＃111;

3.转换

过渡性：不透明性;

过渡时间：3s;

过渡延迟：1s;

过渡定时功能：易入

...可以缩短为：

过渡：不透明3s缓解1秒;

使用诸如Bootstrap之类的框架来处理更复杂的项目

使用框架并不总是合适的，例如，使用小而简单的网站。对于大中型网站而言，Bootstrap等框架在加速CSS开发方面可以提供很大的价值。

Bootstrap与Sass集成，并具有集成的响应式网格系统。这意味着您可以绕过从头开始构建所需的大部分重复CSS。它还包含一个预构建组件库。布局和单个组件（如导航和内容部分）已准备就绪。

使用CSS重置

CSS重置可以减少浏览器在边距，字体大小和行高等方面的不一致性。使用重置可以预先确定CSS的这一方面，而不是在整个样式表中不断添加修复。通过使用复位如这一个由埃里克·迈尔，它适用重置一切少数CSS的行内。将修补程序应用于单个标签需要更长的时间并延长样式表的长度。

html，body，div，span，applet，object，iframe，

h1，h2，h3，h4，h5，h6，p，blockquote，pre，

a，abbr，首字母缩略词，地址，大，cite，代码，

del，dfn，em，img，ins，kbd，q，s，samp，

小，罢工，强，子，sup，tt，var，

b，你，我，中心，

dl，dt，dd，ol，ul，li，

fieldset，窗体，标签，传说，

表，标题，tbody，tfoot，thead，tr，th，td，

文章，放在一边，画布，细节，嵌入，

图，figcaption，页脚，标头，hgroup，

菜单，导航，输出，红宝石，部分，总结，

时间，标记，音频，视频{

保证金：0;

填充：0;

border：0;

font-size：100％;

字体：继承;

vertical-align：baseline;

}

/ * HTML5显示 - 旧版浏览器的角色重置* /

文章，旁边，细节，figcaption，图，

页脚，标题，hgroup，菜单，导航，部分{

显示：块;

}

身体 {

line-height：1;

}

ol，ul {

list-style：none;

}

blockquote，q {

报价：无;

}

blockquote：之前，blockquote：之后，

q：之前，q：之后{

内容：“;

内容：无;

}

表{

边界崩溃：崩溃;

border-spacing：0;

}

使用语法高亮的文本编辑器

使用诸如Sublime text之类的文本编辑器可以使用许多整齐的快捷键和功能来改善使用CSS的工作流程。

您可以使用“ 多次选择”功能一次更改许多行或变量。该拆分编辑模式，您可以编辑你的CSS，同时查看您的HTML或JavaScript。但最有用的功能之一是语法高亮。它将常用的标签，操作符等进行分组，并对它们进行颜色编码，以便在CSS中查找某些点。

使用Emmet文本编辑器插件
emmet是Sublime Text，Atom和Coda等流行文本编辑器的插件。JSFiddle和CodePen也支持它。它允许使用缩写语法和动态片段的超快速CSS编码。为了显示它能够加快编码的速度，请看下面的例子：

#page> div.logo + ul＃navigation> li * 5> a {Item $}

这个代码片段被编写来构建网页的标题部分，包括标志和导航列表。通过使用Emmet，只需点击一下，就可以将其转换为：

<div id =“page”>

<div class =“logo”> </ div>

<ul id =“navigation”>

<li> <a href="">第1项</a> </ li>

<li> <a href="">第2项</a> </ li>

<li> <a href="">第3项</a> </ li>

<li> <a href="">第4项</a> </ li>

<li> <a href="">第5项</a> </ li>

</ UL>

</ DIV>