web前端入门到实战:编写CSS代码的8个策略,资深开发工程师总结

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

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

在我和我们团队的观念中,编写可维护的前端代码非常重要。尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人。仅仅因为你的一次性元素和配置对你有意义,并不意味着它们对下一个可能继承应用程序的人有意义。

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

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

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

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; }

专门建立的学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①② ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

例如,使用.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类将可以更好地工作。

4.除非绝对需要,否则避免嵌套

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

所以你试图像这样写样式:


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

然后在这过程中,你意识到你需要列表元素中的一个链接实际上是黑色的。所以你试图为黑色的链接编写一个工具类:

.link--black { color: black; }

此处.link–black链接将被CSS特殊性所覆盖,并且将无法压倒.my-form li a样式。

现在你可能想要确保列表元素中的所有锚标记是红色的,但是你不知道未来的元素会怎么样以及可能会对设计做出什么样的更改。

你可能会问,“好的亲,那么你怎么解决上面的问题呢?”

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

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


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

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

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

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

5.利用BEM防止嵌套

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

使用BEM的一个很好的例子就是当你有一个真正具体的样式的组件时,如果使用实用程序会太麻烦和复杂的话。

这个例子看起来像这样:


// 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;
}
专门建立的学习Q-q-u-n:⑦⑧④-⑦⑧③-零①② ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

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

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

在一个类上放上!important定义会使得覆盖代码变成一件令人头痛的事情,特别是当你试图处理媒体查询时。

这是我在处理Foundation的某个版本遇到的一个令人头痛的问题,因为他们决定对可见类打上!important。

这对于移动设备也是一个痛苦的根源。例如,如果你希望手机屏幕显示某些内容,则必须使用另一个!important类来重写.hide类以显示它。

我一直找不到使用!important的有效借口,除了在别人错误使用!important定义的情况下。

7.重新发明轮子需要时间和精力,所以要慎重考虑

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

根据我的经验,除非你想知道它是如何工作的,否则自己写这些东西其实并没有多大的好处。有许许多多的边缘情况可以让你自己动手编写代码,所以为什么不使用别人已经写好的免费又能工作良好的代码呢?

也就是说,自己动手创建可能是一个很好的学习经验——但这很可能不属于生产应用程序的过程。

好的,那么JavaScript插件呢?

在谈论JavaScript或jQuery插件时,我要说的是,对于任何你使用的具有很好集成选项的真正常见组件来说,情况也是如此。其中的一些例子是照片轮播的JavaScript转盘,或日期选择器。

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

例如,我会使用立即可用的Foundation或Bootstrap模块,如果我正工作于依赖jQuery的项目,但是会在React中构建我自己的模块(只是因为编写组件以便通过引入jQuery插入到React组件中会更容易)。

8.关注前端代码!

最后,我要向你建议的最重要的事情是,你得关注你为前端编写的代码,掌握它,并持之以恒地改进它(统计提高自己!)。

我相信这是长期可维护的应用程序与难以处理的应用程序之间最大的区别因素之一。

通过遵循编写CSS的八个技巧,你将为自己和未来继承你的代码的开发人员节省时间和精力。

你遵循什么准则来组织和精简你的CSS?欢迎留言,共同进步。

原文地址:https://blog.51cto.com/14592820/2484090

时间: 2024-11-08 23:58:48

web前端入门到实战:编写CSS代码的8个策略,资深开发工程师总结的相关文章

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

web前端入门到实战:CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果? 一.skewX的局限 一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮

web前端入门到实战:CSS:scroll-snap滚动事件停止及元素位置检测

一.Scroll Snap是前端必备技能 CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置.类似幻灯片广告效果就可以纯CSS实现. 而且CSS Scroll Snap的兼容性非常好,移动端几乎可以放心使用. 二.源自实际项目的scroll-snap场景 今天下午在实现一个功能需求的时候,正好遇到一个场景非常适合使用Scroll Snap来实现,滑动依次显示人物角色.于是就大胆使用了下,哇,好棒,无需

web前端入门到实战:CSS自定义属性+CSS Grid网格实现超级的布局能力

最近我还注意到的一件事就是CSS自定义属性.CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量,主要的区别在于其它方法都是在浏览器中编译后生成,还是原本的CSS写法.CSS自定义属性是真正的动态变量,可以在样式表中或使用javascript即时更新,这使得它们具有更多的可能性.如果你熟悉JavaScript,我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与const和let之间的区别相似--它们都有不同的用途. CSS自定义属性可以方便的实现很多功能(例如主题变化).最近我一

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新

web前端入门到实战:CSS 、JS实现浪漫流星雨动画

1,效果图 2,源码 HTML < body > < div class = "container" > < div id = "mask" > </ div > < div id = "sky" > </ div > < div id = "moon" > </ div > < div id = "stars&qu

web前端入门到实战:css样式初始化

为了消除各浏览器对css默认的设置,保持网页在各浏览器中的外观保持一致,初始化css就显得非常必要了!很多时候出现的样式不兼容问题,都可以通过css初始化代码来解决. 1.最耗资源的,最简单的 * { padding: 0; margin: 0; border: 0; } 2.选择性初始化举例(综合) body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend,button form,fieldset,input,textarea,p

web前端入门到实战:CSS Display属性的双值写法

display属性 display 属性用来控制一个元素及其子元素的 格式化上下文, 你应该在刚刚学习CSS的时候就知道,有些元素是块级元素,有些则是行内元素. 有了 display 属性,你就可以切换元素不同的状态.比如说,通常一个 h1 元素是一个块级元素,但是通过切换,它就能以内联元素展现. 这几年,我们也知道了Grid 布局和弹性盒布局.我们只需要将 display 属性的值设置为 display: grid 或 display: flex 就可以实现这两种布局.当 display 属性

web前端入门到实战:css浮动的特性,与浮动带来的影响以及如何清除浮动

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动的特性 1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围 2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素 3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤 5.块元素脱离

web前端入门到实战:css之background-position属性实现雪碧图

什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后用css的background-position来显示需要显示的部分. 为什么要用雪碧图 可以减少加载网页图片时对服务器的请求次数,提高页面的加载速度,解决IE6鼠标滑过时出现闪白的现象. 用雪碧图有什么弊端 个人认为如果你的雪碧图不是很大,也不是很复杂基本没什么弊端.如果你的雪碧图很大又复杂的话就有出现css代码复查,网页占内存大等各种问题. 实例 上面是一个按钮