8个用于编写可维护,简化的前端代码的CSS策略

前言

代码质量不仅适用于后端的Java或C语言,它也适用于CSS。继续阅读,了解如何编写出色的CSS!

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

我认为这主要是因为许多开发人员对CSS / HTML和JavaScript的长久维护缺乏深刻的理解。但是对于团队来说,编写可维护的前端代码是非常重要的。

这篇文章的目的不在于规则手册,而在于您正在编写CSS时,更多的是要考虑事物的指南。我鼓励你找到你自己的编写css的流程,这篇文字的目的是让你的CSS一致,简单,易于使用。

这里有8个秘诀保持您的CSS组织和长期容易维护。

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

例如:编写display:block的时候,很多元素默认都有这种风格。

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

这样做的目的有两个:

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

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

而常见的问题是没有清理干净的CSS,为了简洁起见可以将它完全删除。

2.可以把你的css写成可重用的组件

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

编写可重用的css类可以解决一些事情:

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

这使得你编写CSS会很快。首先,大多数的样式被定义为你所知道的组件和类,则不必花费大量时间刷新和重新创建网页中已存在的样式。

3.在你的CSS中定义utilities来编写你的CSS

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

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

你在流行的框架中看到的一些例子是:

例如,使用.hide,而不是每次只需要在页面上写出一个元素就写出一个新的类,你可以在你的元素上加上.hide类,它会使元素显示display: none; 。

我们开发一个新的网站,一般都抽取旧网站的公共文件,因为这些文件可以减少为每个元素写出特定样式的需求。

通过一个很好的例子就是我们如何使用margin和padding盒子模型。下面是我们的盒子模型的一个简单的例子:

通过结合使用这些通用样式,我们可以保持与盒子间距的px一致,并且可以快速标记页面,而不必编写非常多的CSS。

通用样式背后的想法是,你认为你可能不止一次地使用它们。如果它是一次性风格,或者如果您认为风格的组合会经常使用,那么它可能会更好地作为自己的CSS类。

4.避免嵌套,直到你绝对需要它

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

所以你试图像这样写你的风格:

在编写的过程中,你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图写一个css类的将链接的颜色变成黑色:

这个.link--black将被CSS的特殊性所覆盖,并且无法覆盖.user-form li风格。

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

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

所以,在这种情况下,我会100%确定需要一个额外的css类来处理红色链接。这是在实践中会出现的例子:

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

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

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

5.利用BEM防止嵌套

一个能够真正防止过度嵌套的策略是名为BEM(Block Element Modifier)的命名策略。

使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时,如果修改网页太麻烦或者太复杂。

这个例子看起来像这样:

你可以从这个例子中看到,我可以从我的样式表中看到.profile__photo嵌套在.profile中,实际上我们并不需要嵌套这个类。但这是使用BEM的最好例子,而我为什么建议使用它。

6.只有使用!important 作为最后的手段

在一个类上重写一个!important的定义是一种使你的代码被覆盖的痛苦的方法,特别是当你试图使用媒体查询时。

这是一个移动端的痛苦。例如,如果你先在手机屏幕显示某些内容,你必须使用另一个!important的移动设备类来重写.hide类以显示它。

我从来没有找到一个有效的借口来使用!important的,而不是在别人的错误的地方用!important来定义。

7.有时间和条件重新开始,但仔细考虑你的选择

重新发明轮子的例子可能是在客户端项目中创建自己的网格CSS框架。

根据我的经验,除非你想知道它是如何工作的,否则自己写这些东西并没有多大的好处。有很多边缘情况下建立自己的css样式,而不使用别人的时候,通过这样做你会获得一个很好的学习经验,但是会花费你大量的时间。

好的,但JavaScript插件呢?

在谈论JavaScript或jQuery插件时,我会说,对于那些与您使用的任何组件都有很好集成选项的真正常见组件来说,情况也是如此。

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

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

8.关心你的前端代码!

最后,我可以向你建议的最重要的事情是,你关心你为前端编写的代码,掌握它的所有权,并且始终不断地改进它(和你自己!)。

我认为这是具有长期可维护性的应用程序与难以处理的应用程序之间的最大因素之一。

本文来自企鹅号 - webstack前端栈媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

【转载】XHTML 结构化之二:案例分析:W3school 的结构化标记

无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的...

36716
来自专栏数据小魔方

三角符号凸显数据的盈亏趋势

今天要跟大家分享的技巧是用三角符号来凸显数据表中的盈亏趋势! ▽▼▽ 通常一张带有数据以及增长趋势表格,需要读者反复浏览才能明白其中的趋势和增减情况,可是如果你...

3187
来自专栏芋道源码1024

Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

1650
来自专栏腾讯Bugly的专栏

iOS 视图,动画渲染机制探究

终端的开发,首当其冲的就是视图、动画的渲染,切换等等。用户使用 App 时最直接的体验就是这个界面好不好看,动画炫不炫,滑动流不流畅。UI就是 App 的门面,...

37912
来自专栏三十课

使用min-content实现容器宽度自适应于内部元素

HTML原生就是响应式的(HTML内容在视口内流式的分布)。随着CSS的广泛应用,设计者创建了许多固定布局的“盒子”并把内容强制的放在盒子之中,这有悖于HTML...

1203
来自专栏阮一峰的网络日志

CSS 框架 Bulma 教程

网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架,但是今天我想推荐另一个更轻量化、更易用的框架---...

3084
来自专栏前端知识铺

将你的 Virtual dom 渲染成 Canvas

一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中。支持常规的滚动操作和一些基...

2454
来自专栏我有一个梦想

Python 项目实践一(外星人入侵小游戏)第五篇

接着上节的继续学习,在本章中,我们将结束游戏《外星人入侵》的开发。我们将添加一个Play按钮,用于根据需要启动游戏以及在游戏结束后重启游戏。我们还将修改这个游戏...

3318
来自专栏前端杂货铺

reflow和repaint(摘录自张鑫旭的翻译)

//正文开始 关于回流(reflows)与重绘(repaints),我已经在twitter和delicious上发布,但是并没有在演讲中提到或是以文章形式发布。...

3424
来自专栏一场梦

学习网页制作其实并不难

2293

扫码关注云+社区

领取腾讯云代金券