快捷搜索:
来自 新京葡娱乐场网址 2019-11-01 11:14 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

精短化前端代码的,编写非凡

8 个帮助你编写可维护、精简化前端代码的 CSS 策略

2018/01/04 · CSS · 代码

原文出处: Corinne Kunze   译文出处:开源中国   

写基本的 CSS 和 HTML 是入门 Web 开发首先需要学习的事情之一。然而我遇到的很多程序显然没有真正的花时间去考虑前端开发的长期性和可维护性。

我认为这主要是因为很多开发者在组织他们的 CSS/HTML 和 JavaScript 时没有深入地理解相关的策略。

对于我和我们团队来说,最重要的事情写可维护的前端代码。虽然我们有好几个客户一直合作多年,但一定要记住,你永远不会是在某个应用程序的唯一开发者。你的一次性代码和配置仅仅对有意义,这并不意味着它们对开发这个应用的下一任开发者有意义。

为了不让本文太长,我今天会主要讲述与组织 CSS 相关的内容。组织 JavaScript 有完全不同的做法。

本文的目标是至少成为一个规则,最好能成为你编写 CSS 的指南。我会鼓励你找到自己的处理方式,但这里的目标是使 CSS 一致、简单、易于使用。

这里有 8 个技巧用来组织 CSS,使之便于长期维护。

编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。

1.不要写不需要的样式

例如:在任何地方写 display:block 时都需要注意。因为许多元素默认都有这种样式。

再比如,定义继承了你定义过字体大小的元素的字体大小。

这里的目标是双重的:

  • 减少 CSS 文件的长度,这样更容易在 CSS 文件中定位代码位置。
  • 明确 CSS 类实际需要做什么,而不是定义一堆已有的垃圾样式。

一个常见问题是有许多不再使用的 CSS 样式没有清理掉,为了简洁起见,这些 CSS 样式可以完全删除。

我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解。

2. 考虑把 CSS 当作可复用组件

如果你可以定义可复用的 CSS 工具和组件来使用而不是把 CSS 元素看作每个单页特有的形式和元素,就会大大减少代码的复杂性。

写可复用的类来做这样一些事情:

  • 确定你的设计在多个不同的页面之间保持一致,你应该知道如果你改变了一个类的样式,变化会表现在每一个页面上。
  • 这样写 CSS 确实很快。多数时候,如果你把部分样式定义为一个工具或者类,你就不需要花大量的时间来更新和重建应用中已经存在于其它地方的样式。

在我和我们团队的观念中,编写可维护的前端代码非常重要。尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人。

3. 在 CSS 中定义工具以使你的 CSS 更实用

我们将 ‘工具’ 定义为这样一种 CSS 类,它是为某种特定的目标而生,而不是为了表示一整个元素。

在流程的 CSS 框架,比如 Bootstrap 和 Foundation 中,你会经常看到对这一策略的应用。

在流程框架中可以看到这样一些例子:

.hide { display: none; } .text-center { text-align: center; }

1
2
.hide { display: none; }
.text-center { text-align: center; }

比如,使用 .hide 之后,就不需要每次都写一个类来隐藏页面上的元素,你可以直接在元素上使用 .hide 类,它会赋于元素 display: none; 样式。

我们已经创建了自己的工具文件并在各个应用之间共用,我们使用一些公共工具来减少为每个元素写特定样式的需求。

关于这点,有一个不错的例子,使用 margin 和 padding 工具。这里我们有一个 padding 工具的示例(我们也定义了 margin 相关的工具,以及只有 padding-left 和 padding-right 的工具等):

.padding-0 { padding: 0; } .padding-xxs { padding: 5px; } .padding-xs { padding: 10px; } .padding-sm { padding: 20px; } .padding-md { padding: 30px; } .padding-lg { padding: 40px; } .padding-xl { padding: 50px; } .padding-xxl { padding: 60px; }

1
2
3
4
5
6
7
8
.padding-0 { padding: 0; }
.padding-xxs { padding: 5px; }
.padding-xs { padding: 10px; }
.padding-sm { padding: 20px; }
.padding-md { padding: 30px; }
.padding-lg { padding: 40px; }
.padding-xl { padding: 50px; }
.padding-xxl { padding: 60px; }

通过组合这些工具,我们可以保持空白像素一致,同时快速为页面做上标记,还不用写大量的 CSS。

在定义工具的时候,你应该考虑到会多次使用它们。如果是一次性的样式,或者只是想组合一些常用的样式,那么最好是定义成专门的 CSS 类。

仅仅因为你的一次性元素和配置对你有意义,并不意味着它们对下一个可能继承应用程序的人有意义。

4. 避免嵌套,除非你真的需要它

有一些复选框的表单。 在这个特定的情况下,你需要你的复选框内联(并排)。

你要是试图像这样写你的风格:

.user-form li a { color: red; }

1
.user-form li a { color: red; }

你意识到你需要列表元素中的一个链接实际上是黑色的。 所以你试图写一个黑色链接的工具类:

.link--black { color: black; }

1
.link--black { color: black; }

这个.link – 黑色链接将被CSS的特殊性所覆盖,并且将无法压倒.my-form li风格。

这可能是您的意图,现在要确保您的列表元素中的所有锚点标记是红色的,但是你不知道未来的元素和可能做出的设计更改。

你可能会读到这个问题,“好的 Corinne,但是你怎么解决上面的问题呢?

通过上面的例子,你应该明白锚标签的颜色应该是一个远离默认链接颜色的变体。

所以,在这种情况下,我会100%确定一个额外的工具类来处理红色链接。所以这是一个在实践中看起来像什么的例子:

a { color: blue; &:hover { color: black; } } .link--red { color: red; }

1
2
3
4
5
6
7
a {
  color: blue;
  &:hover {
    color: black;
  }
}
.link--red { color: red; }

然后将其添加到HTML中的每个li元素。

我会在这里作出这样的假设:这个红色的链接将在某一天在应用程序的其他地方被使用。 我不想将它嵌入到用户表单中,因为那样我就不得不在未来写出另外一种风格来解释需要红色链接的情况。

另外,因为我将自己的悬停定义在自己的锚点上,所以红色链接将会变成黑色悬停,而不必定义任何其他样式。

为了防止这篇文章太长,我今天将主要讨论CSS代码。JavaScript代码是另一个完全不同的棘手问题。

5. 利用 BEM 来防止过多的嵌套

BEM (Block Element Modifier) 策略可以地真正防止过度嵌套。

使用 BEM 的一个例子是当你使用一个具有很多具体样式的组件时,它会变得很复杂很混乱并且无法使用 utilitiy 。

举个上述那样的例子:

JavaScript

// HTML snippet <div class=”profile”> <img src=”person.jpg” class=”profile__photo”/> </div> // BEM CSS .profile { background-color: white; border: 1px solid #ccc; } .profile__photo { border-radius: 50%; border: 1px solid #000; }

1
2
3
4
5
6
7
8
9
10
11
12
13
// HTML snippet
<div class=”profile”>
  <img src=”person.jpg” class=”profile__photo”/>
</div>
// BEM CSS
.profile {
  background-color: white;
  border: 1px solid #ccc;
}
.profile__photo {
  border-radius: 50%;
  border: 1px solid #000;
}

从这个例子中你可以看出,我定义的样式表中 .profile__photo 是与 .profile 嵌套的,但是没有使用嵌套的类。这就是 BEM 最厉害的地方,这也是为什么我推荐使用 BEM 。

这篇文章的目的不在于规则手册,而在于你正在编写CSS时的指南。希望能帮助大家找到自己的流程,而这篇文章的目标是让你的CSS一致,简单,易于使用。

6. 只在不得已时使用 !important

在一个类上定义 !important 是一种使代码被有痛覆盖的方法,特别是当你试图处理 media 查询时。

而且这对于移动端来说很麻烦。比如说,如果你希望在手机屏幕显示某些内容,则必须使用另一个 !important 类来覆盖 .hide 类以在移动设备上显示它。

我没有找到一个合理的借口来使用 !important ,除非你是在重写别人之前放错位置的 !important 类。

图片 1

7. 有时候需要重新发明轮子,但请认真考量其他可行选项

在客户端项目中构建自己的网格 CSS 框架,这就是一个重复造轮子的例子。

据我的经验,除非你想知道它是如何工作的,否则自己写这些东西并没有多大的好处。出现过很多自己构建的边缘案例,而且也没有理由不去用别人已经做得很好且免费的东西。

也就是说,自己造一个轮子可能是一个很好的学习经验 – 但这在应用生产中或许并不适用。

好吧,但 JavaScript 插件呢?

在谈论 JavaScript 或 jQuery 插件时,我会说,对于那些与你使用的任何组件都很好集成的常见组件来说,情况也是如此。 这里有一些例子,例如: JavaScript 转盘之间交换照片,或日期选择器。

这里的边缘案例可以使用一些带有封装组件逻辑(React,Ember,Angular等)的 JavaScript 框架插件。 如果你想要做的事情相对简单,有时可能比将这些插件放到这些组件中更麻烦。

例如,如果我使用的是依赖于 jQuery 的项目,但是会在 React 中构建我自己的模块,那么我将使用基础模块或引导模块(仅仅是因为编写组件以便通过引入 jQuery 插入到 React 组件中)。

下面是8个保持CSS有条理和易于长期维护的秘诀。

8. 在乎你的前端代码

最后,我建议你做的最重要的事情是在乎你写的前端代码,掌握代码,并且始终不断地改进代码(同时也要不断提升自己!)。

在一个需要长期维护的应用程序和一个很难上手且总是出问题的项目之间,我相信不断改进代码是最大重要因素之一。

写 CSS 时使用这八个技巧,你不仅可以节省你自己的时间,还能节省未来接手你代码的开发者的时间。

你采取哪一个建议来精简你的 CSS 代码?请在下方评论,让我知道你的选择。

1 赞 3 收藏 评论

图片 2

1.不要写不需要的样式定义

例如:编写display:block;时要注意,因为很多元素默认有这个样式。

另一个例子是在元素上定义字体大小,它将继承你正在定义的正文字体大小。

目标是双重的:

减少CSS文件的长度,以便浏览。

明确你的CSS类需要做什么,而不是定义一堆已经产生的垃圾。

这里有一个常见问题是CSS没有清理干净,此时,为了简洁起见,可以完全删除。

2.将CSS看作可重用组件

不要将CSS元素视为每个单独页面上的特定表单或元素,如果你可以定义可重用的CSS实用程序和组件以供自己使用,则可以减少很多复杂性。

编写旨在重用的类的作用:

确保你的设计在不同的页面之间保持一致。当你在很多页面上共享CSS类时,你知道当你改变这个类时,它会在每一个出现的页面发生改变。

这使得编写CSS真的很快。首先,如果大多数样式被定义为你所知道的实用程序和类,那么你就不必花费大量时间刷新和重新创建应用程序中已存在的样式。

3.在CSS中定义实用工具来干你的CSS

我们将’utilities’定义为一个CSS类,实际上它只用来做一件特定的事情,而不是封装整个元素。

你会看到这个策略经常用于流行的CSS框架,如Bootstrap和Foundation。

在这些流行的框架中你所看到的一些例子是:.hide { display: none; }.text-center { text-align: center; }

例如,使用.hide,就不必每次想要在页面上隐藏元素时就得编写一个新的类——你只需要在你的元素上加上.hide类,它会使元素display: none; 。

我们写了一些实用程序文件,这些文件在应用程序之间共享,使用一些常用的实用程序可以减少为每个元素编写特定样式的需求。

一个很好的例子是我们如何使用margin和padding实用程序。

下面是padding实用程序的一个简单例子:.padding-0 { padding: 0; }

.padding-xxs { padding: 5px; }

.padding-xs { padding: 10px; }

.padding-sm { padding: 20px; }

.padding-md { padding: 30px; }

.padding-lg { padding: 40px; }

.padding-xl { padding: 50px; }

.padding-xxl { padding: 60px; }

通过结合使用这些工具,我们可以与我们间距的像素数保持一致,并且可以快速标记页面,而不必编写非常多的CSS。

实用程序背后的理念是,你认为你可能会不止一次地使用它们。如果它是一次性样式,或者如果你认为组合样式会经常使用,那么可能它作为CSS类将可以更好地工作。

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:精短化前端代码的,编写非凡

关键词: