编写优秀 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; }
例如,使用.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;
}
你可以从这个例子中看到,我可以从我的样式表中看到.profile__photo嵌套在.profile中,然而实际上并不需要嵌套这个类。这真的是BEM最棒的地方,也是为什么我建议使用它的原因。
6.只使用!inportant作为最后的手段
在一个类上放上!important定义会使得覆盖代码变成一件令人头痛的事情,特别是当你试图处理媒体查询时。
这是我在处理Foundation的某个版本遇到的一个令人头痛的问题,因为他们决定对可见类打上!important。
这对于移动设备也是一个痛苦的根源。例如,如果你希望手机屏幕显示某些内容,则必须使用另一个!important类来重写.hide类以显示它。
我一直找不到使用!important的有效借口,除了在别人错误使用!important定义的情况下。
介绍一个java学习交流群:642830685 有什么不懂的可以在群里问,群内不定期分享免费学习资料,一起交流学习!
7.重新发明轮子需要时间和精力,所以要慎重考虑
比如说在客户端项目中创建自己的网格CSS框架,可能就是一个重新发明轮子的例子。
根据我的经验,除非你想知道它是如何工作的,否则自己写这些东西其实并没有多大的好处。有许许多多的边缘情况可以让你自己动手编写代码,所以为什么不使用别人已经写好的免费又能工作良好的代码呢?
也就是说,自己动手创建可能是一个很好的学习经验——但这很可能不属于生产应用程序的过程。
好的,那么JavaScript插件呢?
在谈论JavaScript或jQuery插件时,我要说的是,对于任何你使用的具有很好集成选项的真正常见组件来说,情况也是如此。其中的一些例子是照片轮播的JavaScript转盘,或日期选择器。
这里的边缘案例是使用一些带有封装组件逻辑的JavaScript框架的插件(React,Ember,Angular等)。如果你想要做的事情相对简单,有时可能将这些插件放到组件中会更麻烦。
例如,我会使用立即可用的Foundation或Bootstrap模块,如果我正工作于依赖jQuery的项目,但是会在React中构建我自己的模块(只是因为编写组件以便通过引入jQuery插入到React组件中会更容易)。
8.关注前端代码!
最后,我要向你建议的最重要的事情是,你得关注你为前端编写的代码,掌握它,并持之以恒地改进它(统计提高自己!)。
我相信这是长期可维护的应用程序与难以处理的应用程序之间最大的区别因素之一。
通过遵循编写CSS的八个技巧,你将为自己和未来继承你的代码的开发人员节省时间和精力。
你遵循什么准则来组织和精简你的CSS?
编写优秀 CSS 代码的 8 个策略的更多相关文章
- 编写优秀CSS代码的8个策略
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / H ...
- 前端开发必备 40款优秀CSS代码编写工具推荐
摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...
- Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧
<!DOCTYPE html> Sublime Text webstorm等编译器快速编写HTML/CSS代码的技巧--summer-rain博客园 xiayuhao 东风夜放花千树. 博 ...
- Sublime Text、webstorm等编译器快速编写HTML/CSS代码的技巧
Sublime Text.webstorm等编译器,如果你从事Web前端开发的话,对这几款软件一定不会陌生.它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演 ...
- 20个编写现代 CSS 代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- 20个编写现代CSS代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- 编写现代 CSS 代码的 20 个建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- [转]前端开发必备 40款优秀CSS代码编写工具推荐
编写工具地址如下 英文地址:http://webtoolsdepot.com/40-css-tools-to-improve-your-productivity/ 中文地址:http://www.cs ...
- 快速编写HTML,CSS代码的有力工具Emmet插件
Emmet 是一个编辑器插件,它以一种简写的语法规则可用于快速编写html或css文档内容,它支持多种编辑器. 从官网:http://emmet.io/ 可下载各个编辑器的插件.notepad++ 插 ...
随机推荐
- Upload-libs通关详解
Uplo ad-labs—详解 1前端验证绕过 前端验证绕过可以直接用burp万能绕过前端JS脚本 方法先上传一张jpg Burp改包然后改后缀 上传成功 2Content-Type方式绕过 此绕过方 ...
- HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片
一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...
- C++入门经典-例5.13-内存安全,被销毁的内存
1:当指针所指向的内存被销毁时,该区域不可复用.若有指针指向该区域,则需要将该指针置为空值(NULL)或者指向未被销毁的内存. 内存销毁实质上是系统判定该内存不是变成人员正常使用的空间,系统也回将它们 ...
- Spring的jsp标签库
1,主要有两个 一个用于渲染HTML表单标签, 这些标签会绑定model中的某个属性 另一个包换了一些工具类标签 2,将表单绑定到模型上 包含了14个标签,海报一个人为用户展现错误的标签,它会将错误信 ...
- 【转】jQuery - 同时添加click和dblclick事件
特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...
- SpringBoot中application.yml基本配置详情
把原有的application.properties删掉.然后 maven -X clean install,或者通过Maven Project双击clean和install(1)端口服务配置 #端口 ...
- hdjs---laravel 框架使用hdjs 实现多图上传功能
hdjs---laravel 框架使用hdjs 实现多图上传功能 一.总结 一句话总结: [在网上找hdjs的使用实例]和[能遇见讲hdjs的视频],也是完全搞懂hdjs的不错的方式 1.hdjs中的 ...
- out 传值(传址)
传值,只将这个变量的值给拿走,不返还,除非return赋值.将a的值传入函数,无论这个值在函数中如何变化,不会影响main中的a 传址,将这个变量的值拿走运算,完成后还是得返还回来(不用return, ...
- leetcode-easy-listnode-206 reverse linked list
mycode 98.87 # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x ...
- linux (一)
一.文件目录 cd 目录进出 pwd 查看路径 ls:ll 查看目录 mkdir : mkdir -p app/test 创建目录 touch 创建文件 rm :rm -r 递归 -f 强制 mv ...