请避免犯这9个常见的 CSS “坏习惯”

载说明：原创不易，未经授权，谢绝任何形式的转载

层叠样式表（CSS）是一种强大的样式表语言，可以帮助前端开发人员为简单的网页添加样式。然而，在使用这种样式表语言时，开发人员可能会犯一些错误。这些错误会妨碍开发人员编写高效的代码。本文探讨了一些常见的错误，并为每个错误提供了解决方案。

以下是我们开发人员经常犯的九个最常见的错误；你也犯过其中一些吗？

1、滥用“!important”

!important 是 CSS 中的一个关键字，它可以帮助我们将属性值设置为比其他样式选项更重要。例如，如果您将 !important 声明应用于元素样式，那么该样式将覆盖该属性类别的所有其他样式。以下是语法：

selector {
 property: value !important;
}

例如，如果您有一个标题元素 - h1 ，就像这样：

<h1 class="css-mistake">CSS Mistakes</h1>

然后您应用以下样式规则：

h1 {
 color: red;
}
.css-mistake {
 color: green;
}

默认情况下，标题文本的颜色将为“绿色”，因为类选择器具有比元素（标签）选择器更高的CSS特异性选择器。但是使用 !important ，您可以覆盖该样式CSS规则（从而使元素（标签）选择器覆盖类选择器）。通过这种方式，标题文本的颜色将为红色，优先于类选择器设置的绿色。

h1 {
 color: red !important;
}

过度使用 !important 会导致特异性战争-一种状态，其中样式开始互相覆盖，无法按照样式表的作者定义的方式工作。下一节将通过列举适当使用 !important 的实例来提供解决此问题的方法。

什么时候应该使用？

就像本节标题所说的那样——“过度使用 !important ”，我们在使用这个关键词时必须小心谨慎。只有在迫切需要时才应该节制地使用 !important 。以下是一些使用它的情况：

在一个样式表中，你使用了第三方库或框架，并且你需要你自己编写的自定义样式（自定义的CSS）来覆盖该库中的样式，而不需要修改该库的主题。
当您需要覆盖一些预定义的样式以增强可访问性时。这种情况在您尝试使您的网站对所有用户包括视力受损的用户（低视力患者）都可访问时经常发生。例如，您设置了一些颜色值，最终发现对于视力受损的人来说很具挑战性，无法产生共鸣。您可以使用 !important 来覆盖默认的颜色值。
如果你遇到了CSS样式调整无法有效解决的布局问题，你可以使用 !important 来解决这个特定的样式问题。然而，请记住这种方法应该被视为最后的手段。
你需要知道一些浏览器对CSS有默认样式。在这种情况下，你可以使用 !important 来覆盖默认样式，确保在不同浏览器上的样式一致性。
您还可以将其用于测试和调试样式表。如果某个样式不起作用，您可以应用 !important 来强制应用所需的样式，覆盖任何冲突的样式。这种方法可以帮助您快速定位代码中的问题所在。

2、使用绝对单位

在进行样式设计时，使用正确的长度单位对于创建响应式设计至关重要。CSS有两类长度单位：绝对单位和相对单位。许多CSS属性，如“宽度”、“高度”、“字体大小”等，都使用单位来表示其值。下面的代码片段给出了单位的使用示例：

selector {
 font-size: 14px;
}

在上面的代码片段中，我们声明了“font-size”CSS属性，然后给它赋了一个14px的值。

什么是绝对单位？

这些是长度单位，无论渲染媒体如何，都具有固定的值，与设备的屏幕尺寸无关。这些单位非常适合在不同屏幕尺寸上保持元素的相同大小。你可能已经使用过一些标准的绝对单位，如像素 - px, 点 - pt, 英寸 - in, 毫米 - mm, 厘米 - cm, 和派卡 - pc. 绝对单位为我们提供了准确、固定和精确的样式值，但它们不会根据屏幕尺寸进行缩放。绝对单位不适用于实现响应式设计。因此，将它们限制在不需要根据浏览器尺寸或设备屏幕尺寸进行调整的元素上。另一方面，相对单位如其名称所示，是相对于另一个属性（大多数情况下是父元素）的。这些单位具有灵活性，可以根据视口动态增长，适应响应式设计，与绝对单位不同。一些相对单位的例子是百分比（%）- rem, em, 等等。

如何使用相对单位及其解释

了解每个相关单位的重要性，使您具备有效使用它们的知识。以下是一些相关单位及其解释：

% - 这个单位完全依赖于父元素。因此，它是相对于父元素的。例如，如果你将一个元素的宽度设置为80%，它将是父元素宽度的80%。请注意，在以下属性的值中使用百分比：宽度、高度、边距和内边距。

em - 这与父元素的字体大小相关。例如，如果您将元素的字体大小设置为4em，则它将是父元素字体大小的四倍。在处理排版（文本）时使用 em - 这使文本按比例缩放。

rem - 这是相对于根元素的字体大小。通常使用 rem 来实现整个布局的一致样式。

vh - 相对于视口高度的1%。

vw - 相对于视口宽度的1%。

3、使用内联样式

内联样式是一种通过 style 属性将直接样式传递给HTML元素的样式系统。虽然存在这种样式系统，但重要的是要理解它的使用不支持应用程序构建的最佳实践，因为它会创建不可重用的代码。只有在测试或美化简单的HTML文件时才使用内联样式。以下是一些避免使用这种样式系统的原因：

使用内联样式，你无法遵循DRY（不要重复自己）原则。内联样式会导致代码重复和不可重用的代码，因为每个元素都会被单独设置样式，即使它们共享相同的样式。内联样式会导致冗余的代码。
代码变得难以阅读，也变得臃肿。这会导致HTML文件大小增加，影响性能。此外，您的代码变得混乱而没有结构性；因此，应该区分结构（HTML）和样式（CSS）。
这导致了一种被称为“可维护性复杂性”的情况，基本上意味着你的代码变得难以维护。例如，如果你需要修改一个元素的外观，你必须找到相应的HTML标签并进行直接的样式调整。想象一下，如果内联样式散布在各个地方，这种方法就不适合扩展。

最佳实践

为了克服内联样式的缺点，您必须使用内部样式表（位于 <style> 标签内的样式）或外部样式表来保持您的代码健康和有组织。

外部样式表：创建一个外部CSS文件。存储您的样式，然后将其与HTML链接起来。通过这样做，您可以区分HTML和CSS代码，使您的样式易于维护和重用。
内部样式表：在您的HTML文件中，使用 <style> 标签在HTML文档的 <head>. 中。尽管这种方法是在HTML文件中，但您仍然可以实现内容（元素）与表现（样式）的分离。

4、不使用CSS重置

不同的浏览器具有各种默认样式，这些样式不同，导致元素的外观不一致。这就是为什么我们必须定义一些样式，以便在其他浏览器上为网页样式提供一致的起点。这些样式被称为“CSS重置”。CSS重置是一种CSS样式，用于删除浏览器默认样式的规则。如果您熟悉CSS，并且在使用过程中有时会注意到某些特定属性的默认样式，如 margin. ，CSS重置可以帮助我们将样式基础调整到一致的水平。以下是使用这些重置的原因：

一致的样式：我们可以通过CSS重置覆盖浏览器的默认样式，使样式表保持一致。
为了保持对样式表的控制，CSS重置确保您的样式受到您作为样式表作者的影响，而不是您的浏览器。

如何创建自己的CSS重置

这里是要遵循的简单步骤：

首先，您必须确定您想要删除或覆盖的默认样式。这是起点，因为在提出解决方案之前，您必须先确定问题。
然后，针对已确定的样式，编写自己的CSS样式。这些样式将作为你的样式表遵循的规则。
最后，在各种浏览器上测试您的样式表，以确保您的CSS重置优先于特定于浏览器的样式。为了使事情看起来不那么抽象，这里是一个使用通用CSS选择器（*）实现的简单CSS重置。

* {
 margin: 0;
 padding: 0;
 border: 0;
}

上面的代码是一个基本的CSS重置，它针对边距、内边距和边框属性，将每个属性的值设为0。这个过程被称为“标准化过程”，它可以消除浏览器默认的间距和边框。这里有一些在线的CSS重置：

Normalize.css（https://necolas.github.io/normalize.css/）
Josh Comeau custom CSS reset（https://www.joshwcomeau.com/css/custom-css-reset/）
HTML5 Boilerplate HTML5模板（https://html5boilerplate.com/）
The popular Eric Meyer’s Reset CSS（https://meyerweb.com/eric/tools/css/reset/）

5、不使用单行CSS代码

CSS中的单行代码是CSS代码的速记样式。它可以使代码更加清晰和有结构。掌握这些速记技巧将有助于您编写更简洁的代码（将多行代码压缩为单行）。例如，当您想要在所有边缘（上，下，左，右）处对元素边距进行样式设置时，您不需要明确地指定所有属性（如 margin-top, margin-right, margin-bottom, 和 margin-left, ），您可以直接使用边距属性的速记方式。下面的代码解释了这一点：

/* Don't do this */
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 15px;
/* Instead, use Margin Shorthand */
margin: 10px 20px 10px 20px;
/* Margin Shorthand can even be more simplified */
margin: 10px 20px;

这些简短的话语带来了许多优点：

简洁的代码：您可以编写更短、整洁且易读的代码。
高效的代码：您可以编写高效的代码，减小样式表文件的大小并提高性能。
可维护的代码：样式表变得更易维护和无错误。修改样式和调试样式也变得更容易。要发掘这些一行代码的全部威力，您必须查看可用的CSS一行代码。以下是一些经过筛选的资源，以帮助您的探险：
Mozilla（https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties）
Plainenglish（https://javascript.plainenglish.io/11-css-one-liners-that-are-insanely-useful-8a2878200474）
Web dev（https://web.dev/one-line-layouts/）

6、未有效地使用选择器

CSS选择器可以在外部或内部样式表中定位HTML元素。CSS中有许多选择器方法，包括标签（元素）、类、ID和伪元素。知道何时使用选择器以及何时不使用选择器非常重要。此外，您还必须了解CSS选择器的工作原理。

标签选择器：这些选择器使用标签名称（例如： div, p ）来定位特定的HTML元素。它们具有最低的特异性，因为它们也会导致广泛的样式，即将样式应用于所有具有指定标签的HTML元素。
类选择器：这些选择器更具体，不像标签选择器那样，因为它们使用应用于HTML元素的类属性。例如：（ .container ），（ .header ）。
ID选择器：在我们日常活动中，ID是一个唯一的值；同样，在CSS中，ID选择器也是如此。ID选择器是用于定位单个或唯一HTML元素的唯一ID属性。例如，( #name )，( #title )。它们具有很高的特异性，适度使用可以使它们变得独一无二。上面是一些CSS选择器。本指南假设您已经熟悉CSS选择器。然而，本指南仍然解释了一些常见的选择器及其工作原理。那么，在选择选择器时，您应该注意什么呢？

具体性：使用特定于目标元素的选择器。这将创建一个样式约束，并帮助避免过于具体的选择器，这可能会影响代码的可重用性。
可读性：所选择的选择器应易于阅读和理解，帮助我们实现清晰的代码架构。
尽量减少使用ID选择器：仅在需要使用唯一ID时才使用ID选择器。如果不小心使用，由于其高度特异性，将会带来极大的复杂性。
当您需要可重用的代码时，请使用类选择器。

如何避免使用过于复杂的选择器

如果你在你的样式表中遇到了像下面这样的代码片段，那就意味着你正在使用过于复杂的选择器。

#container > .box > content .section .title p > span .italic {
 color: blue;
 font-weight: bold;
}

以下是避免过于复杂选择器的技巧：

为元素选择器选择最具体的选择器。
为元素选择器选择最具体的选择器。
使用选择器组合器来选取具有相同样式的元素。
经常学习代码重构（您将能够发现复杂的选择器）。
使用CSS模块来组织代码结构。
避免使用后代选择器。例如，使用（ ul, li, 和 a ）来选择一个元素。这样可能很高效，但随着时间的推移，它们最终会导致选择器过于复杂。

7、忽略浏览器兼容性

浏览器兼容性很重要，因为你不希望样式在一个浏览器上良好运行，在另一个浏览器上则运行不正常。忽略浏览器兼容性可能会导致用户在不同浏览器上的体验不一致。这是因为不同的浏览器有其自己的CSS样式渲染方式。但是，你可以通过考虑浏览器兼容性并确保你的样式与不同浏览器兼容来实现样式一致性。实现浏览器兼容性代码的一种方法是实施以下操作：

使用供应商前缀：某些CSS属性需要您使用前缀来渲染，无论使用哪种浏览器。需要这些前缀的浏览器包括Internet Explorer，Mozilla Firefox和Safari。这些前缀被称为供应商前缀，因为它们是特定类型的浏览器独有的。前缀的示例： -webkit-, -moz-, 和 -ms-. 。

/* webkit-prefixed version - used by browsers that use the WebKit layout engine, such as Chrome and Safari- */
-webkit-border-radius: 8px;
/* ms-prefixed version -used by browsers that use the Microsoft layout engine, such as Internet Explorer. */
-ms-border-radius: 10px;
/* standard version */
border-radius: 8px;

声明字体回退：在为“font-family”等属性分配值时，您必须添加回退字体。如果自定义字体不可用，回退字体将是实施的选项之一。

利用Can I Use网站检查CSS属性在各种浏览器中的兼容性。（https://caniuse.com/）

8、使用颜色名称而不是十六进制代码

Hex码是颜色的十六进制表示。它是一个由“#”符号前缀的6位代码，后跟三对十六进制数字，其中第一对表示红色值，第二对表示绿色值，最后一对表示蓝色值。语法：

使用直接的颜色关键词有一些限制：

颜色名称在不同的浏览器中是不一致的。例如，如果你将颜色属性设置为绿色，不同的浏览器对其解释的方式也会有所不同。因此，不同浏览器之间的渲染是不一致的。

颜色名称受到限制，因为您无法调整它们的色调、阴影等。

颜色名称的选择有限。由于使用颜色名称的限制，我们需要选择使用十六进制代码，这些代码没有这些限制。以下是十六进制代码比颜色关键字更合适的原因：

十六进制代码在各种浏览器中都是精确且一致的。
现代浏览器广泛支持它们
他们有各种颜色供开发人员选择
不受限于实施 - 您可以轻松调整它们以适应您的偏好。

寻找十六进制代码的高效方法

以下是获取十六进制代码的几种方法：

使用在线颜色选择器 - 打开您的浏览器并输入此查询 - “在线颜色选择器”，然后搜索。在返回的页面上，您会得到一个颜色选择器。
你还可以通过色彩图表了解十六进制代码。
在浏览器开发者工具的控制台中，您还可以访问一个颜色选择器工具。
最后，您可以在网上查找已经进行了适当研究并整理了这些十六进制代码列表的资源。

9、其他忽视的额外错误

使用0px替代0：毫无疑问，这可能不会对样式表产生影响，但为了最佳实践，请确保使用0而不是0px。

selector {
 /*Don't do this*/
 padding: 10px 12px 15px 0px;
 /*Do this*/
 padding: 10px 12px 15px 0;
}

设置高的z-index值：给 z-index 分配高值是非常不必要和过度的。迟早，这将在你的样式表中造成问题，特别是当 z-index. 有多个实现时。

selector {
 /*Don't do this*/
 z-index: 50;
 /*Do this*/
 z-index: 2; /*Let the value be minimal*/
}

结论

本文深入探讨了常见的CSS错误，并为每个错误提供了深入的解决方案。通过阅读本指南，毫无疑问您已经了解了一些常见的CSS错误，并且从此以后，您将知道如何解决它们，因为我们还要研究每个错误的解决方案。

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

avaScript最初只是为开发网页的客户端而知名的，而且随着新的框架被开发用于服务器端。JavaScript已经成为当今世界上最流行的编程语言之一也就不足为奇了。

随着越来越多的程序员学习用JavaScript编写代码，伟大的项目也在不断增加。

1. React.js

88,356★

JavaScript主要用于客户端项目，React.js是用于开发出色的前端设计和交互的框架示例。由Facebook创建，React是一个用于创建功能强大的可重用UI组件的库。

使用React的优势之处在于它通过使用虚拟DOM来隐藏复杂性，这有助于提高应用程序的性能。React的功能包括JavaScript语法扩展，单向数据流，组件等等。

学习React是非常容易的，如果你对JavaScript有很好的把握。您可以从React.js网站访问该教程。React的安装和设置非常简单。

npm install -g create-react-app

create-react-app my-app

cd my-app

npm start

2. Vue.js

83,742★

就像React一样，Vue是构建优秀用户界面的另一个框架。这种渐进式框架的设计，随着时间的推移很容易适应，这使得库很容易与其他项目整合并随时使用。

Vue.js以其简单性而广为人知，除此之外，它是轻量级的，有良好的文档记录，并且在开发期间具有灵活性。Vue鼓励开发人员编写“简单的JavaScript”，因此，初学者很容易掌握。

Vue非常易于安装和设置。

npm install -g vue-cli

vue init webpack my-app

cd my-app

npm install

npm run dev

3. Node.js

45,478★

这里是有史以来最好的服务器端开发框架之一，这使得JavaScript在服务器端脚本项目中非常受欢迎。

Node.js带来了包管理工具NPM，它帮助许多开发人员更轻松地生活。开发人员也喜欢它提供了一个非阻塞的I / O模型，可用于开发实时Web应用程序，易于学习，并且拥有一个大型社区。

Windows和Linux上Node的安装过程不同。对于Windows，只需下载并安装Node.js 可执行应用程序即可。

对于Linux，下面的Linux终端命令会安装它：

sudo apt-get update

sudo apt-get install nodejs

安装后，应运行以下命令以确认安装是否成功。

node -v

4.Atom

43,368★

这是您将找到的最好的文本编辑器之一。它与Sublime Text和Visual Studio等竞争，因为它具有功能强大，并且具有智能自动完成功能，集成的拼写检查功能，并且非常易于使用。

然而，开始使用Atom非常困难，这是因为需要花费时间来设置插件，以帮助创造出色的体验。

在Linux上安装Atom并不困难，运行下面的命令可以完成这项工作。

curl -L https://packagecloud.io/AtomEditor/atom/gpgkey | sudo apt-key add -

sudo sh -c 'echo "deb [arch=amd64] https://packagecloud.io/AtomEditor/atom/any/ any main" >

/etc/apt/sources.list.d/atom.list'

sudo apt-get update

sudo apt-get install atom

在Windows上安装它也不困难，可以从GitHub页面下载可执行文件。

5. HTML5

Boilerplate

39,744★

随着时间的推移，网页的发展变得越来越复杂。由于生产力越来越成为瓶颈，减少日常工作具有重要意义。

借助HTML5 Boilerplate项目，开发过程变得更加愉快。这会是您发现的最流行的前端样板框架，因为它有助于构建快速，健壮和适应性强的Web应用程序。

它包括Normalize.css，jQuery，Modernizr人脸检测库的自定义版本，并且提供高性能。

HTML5 Boilerplate框架可以从他们的GitHub页面下载。

6.Three.js

39,297★

有几个流行的3D计算机图形框架，Three.js就是其中之一。Three.js用于通过使用WebGL引擎在Web浏览器中创建漂亮的3D计算机图形。

Three.js带有一些功能。诸如效果和场景，相机，皮肤网格和变形混合网格，灯光 , 动画等功能已经帮助它获得了普及。

其庞大的开发人员和用户群体是非常积极的，所以您可以期待该项目的稳定改进。

Three.js易于安装，可以从GitHub页面下载。

7. MeteorJS

39,213★

构建所有平台应用程序的框架而言，MeteorJS是您找到的最好的应用程序之一。

MeteorJS支持实时的Web开发，使得客户端，服务器端和应用程序数据库的开发变得容易得多，易于初学者编写代码，并且拥有庞大的开发者社区。

寻找指南？这是Meteor的开发者写的一个。

Meteor很容易安装，运行下面的终端命令将完成这项工作。

sudo curl https://install.meteor.com/ | sh

要检查安装是否成功，请使用以下命令：

meteor --version

8. Express.js

36,624★

在文章的前面，我们讨论了Node.js框架。Express实际上是建立在Node.js之上的！

Express.js是一个灵活的基于Node.js的Web应用程序框架，用于开发高质量的Web和移动应用程序。

用于构建Web应用程序和API，Express.js在JavaScript社区中非常流行。如果你在业务中待了一段时间，那么你很可能听说过MEAN堆栈--Express构成了堆栈的后端部分。

Express使开发过程更快，配置和定制更容易，可以集成大量模板引擎，并且不会与数据库连接造成麻烦。

由于Express构建在Node.js上，因此可以使用NPM工具进行安装。

npm init

然后安装并将Express添加到依赖关系列表中：

npm install express --save

或者在没有将Express添加到依赖关系列表的情况下进行安装：

npm install express --no-save

9. Chart.js

35,151★

在这个大数据的世界里，数据的可视化已经变得非常重要，不仅对统计人员而且对web开发人员也是如此。

借助Chart.js，您可以在网页上显示精美的图表，确保在可视化数据之前不必经历环境变化。

Chart.js重量轻，速度快，可用于创建响应式图表，具有非常明确的文档，并支持多达8种图表类型。如果这还不够的话，Chart.js拥有一个庞大的用户社区，因此您可以快速找到问题的解决方案。

该图表库可以使用npm工具进行安装，只需使用以下命令：

npm install chart.js --save

10.Yarn

30,168★

这是一个JavaScript包管理工具，有助于简化开发过程。

和react一样，yarn也是由facebook开发的，它可以被看作是对npm工具的改进，因为它可以将npm没有的操作并行化，从而更有效地利用网络。

Yarn受欢迎的一些原因是它的执行速度，强大的工作系统，许可证检查的可用性以及与NPM和Bower软件包管理工具的令人难以置信的兼容性。

Yarn可以使用npm工具进行安装：

npm install yarn --global

在Linux上，它也可以使用下面的命令进行安装：

curl - sS https: //dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee / etc / apt / sources.list.d / yarn.list

然后：

sudo apt-get update && sudo apt-get install yarn

有需求的小伙伴赶紧转发收藏吧~~！

文共2830字，预计学习时长9分钟

来源：Pexels

GitHub网站上包含了目前所有与web开发相关的内容，提供一站式服务。这里有框架，有演示，包罗万象，可能没有什么是你找不到的。但这也是问题所在——其中有很多有趣的东西，但也许你永远不会知道，原因就在于GitHub上可用的存储库实在太多。

所以，小芯决定在此介绍一些GitHub上最流行的存储库，其中每个存储库都至少拥有30000颗星星。

1、 Realworld

首先要推荐的存储库是Realworld，其创造者称之为“演示应用程序之母”。这个说法自然很大胆，但却不夸张。

Realworld是Medium.com的一个典型翻版（没错，可能就是你正在浏览的这个平台！）。不仅如此，Realworld允许开发者在不同的前端和后端实现之间进行选择，甚至可以将两者结合。

Vue.js+Node/Express或React/Redux+Rust，都能搞定！

通过Realworld，开发者会发现，同一个社交软件却可以用任何不同的流行语言或框架进行建构，这不神奇吗？

2、You Don’t Know JS Yet

这一存储库实际上是一套十分流行的系列丛书，作者为Kyle Simpson，以笔名Getify广为人知。这套书深入探讨了JavaScript的机制，涵盖了以下内容：

·开始着手

·作用域和闭包

·对象和类

·类型和语法

·同步和异步

·ES.Next及其他

这套书的优点在于对读者完全开放！这绝对是关于JavaScript最好的系列丛书之一，它也帮助笔者理解了JavaScript的真正含义。即使你认为自己很懂JavaScript，也应该好好读这套书，你一定会得到意外的收获！

3、 Airbnb JavaScript Style Guide

学习JavaScript最合理的途径

Airbnb JavaScript Style Guide是最常见也最流行的风格指南之一，可以帮助开发者编写更好的JS代码，在团队合作中或者在与ESLint结合时特别实用。

下面是来自文件中的一个示例，使用了const而非var：

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

4、 Storybook

Storybook 是一个用于UI组件的开发环境。它允许开发者浏览组件库，查看每个组件的不同状态，并交互式地开发和测试组件，同时支持React、Vue、Angular、React Native、Ember、Web等众多组件！

Storybook的运行独立于应用程序。这就允许开发者单独开发UI组件，从而提高组件的重用性、可测试性和开发速度。开发者可以快速构建，而不必担心与特定应用程序之间的依赖关系。

5、HTML5 Boilerplate

HTML5Boilerplate是一个专业的前端模板，也是网络上最流行的前端模板之一。它可以帮助开发者建立快速、耐用、适应性强的网站或应用程序，微软、NASA和耐克等公司都在使用。

以下是HTML5 Boilerplate的一些重要特征：

·配置HTML5。

·设计时考虑到渐进增强。

·包括：Normalize.css、jQuery和Modernizer。

·通过配置提高网站的性能和安全性。

·占位符CSS媒体查询。

·默认打印样式，性能优化。

·谷歌通用分析工具平台的优化版本。

6、Node.js Best Practices

这一存储库广泛整合了有关Node.js开发的各种最佳实践，它目前由80多个最佳实践、样式指南和架构技巧组成。

其中包含以下内容：

·项目结构实践

·错误处理实践

·代码风格实践

·测试和总体质量实践

·投入生产实践

·安全性实践

·效果实践

这无疑是一个优秀的存储库，包含了众多信息。如果想尝试Node.js开发，这一存储库会是不错的选择！

7、Front-End Checklist

在启动web应用程序之前，你是否问过自己其中需要包含哪些东西？需要进行哪些测试？Front-End Checklist中就涵盖了这些！

以下所列对大多数项目来说都是必须的，其架构方式如下：

·标题

·HTML

·网络字体

·CSS

·图像

·JavaScript

·安全

·性能

·可实现性

·SEO

·翻译

以下是来自苹果网站应用MetaData的示例：

<!-- Apple Touch Icon (atleast 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
  
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable"content="yes">
  
<!-- Status Bar Style (see Supported Meta Tags below for available values)-->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style"content="black">

8、NW.js

NW.js是一个基于Chromium和node.js的应用程序运行时。在NW.js上，开发者可以用HTML和JavaScript编写本地应用程序。它还允许开发者直接从DOM调用Node.js模块，形成一种编写本地应用程序的新方法，对任何Web技术都适用。

以下为它的主要功能：

·使用现代HTML5、CSS3、JS和WebGL编写应用程序。

·完全支持Node.js API及其所有第三方模块。

·性能良好：Node和WebKit运行在同一线程中。

·易于打包和分发应用程序。

·可在Linux、Mac OS X和Windows上使用。

9、fullPage.js

Alvaro Trigo提供的fullPage.js是一个简单易用的存储库，它允许开发者创建SPA（单页应用程序）和横向滑块，可用于Vue、React和Angular，对移动设备完全响应。

开发者可在开源项目中自由使用这一存储库，但如果想在商业环境中使用，则必须购买许可证。

这一存储库非常酷炫，值得一看！