如何在内嵌 css 中编写: hover_优秀 CSS 代码的 8 个编写技巧!
这篇文章的目的不在于规则手册,而在于你正在编写CSS时的指南。希望能帮助大家找到自己的流程,而这篇文章的目标是让你的CSS一致,简单,易于使用。
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。
我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解。
下面是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定义的情况下。
7、重新发明轮子需要时间和精力,所以要慎重考虑
比如说在客户端项目中创建自己的网格CSS框架,可能就是一个重新发明轮子的例子。
根据我的经验,除非你想知道它是如何工作的,否则自己写这些东西其实并没有多大的好处。有许许多多的边缘情况可以让你自己动手编写代码,所以为什么不使用别人已经写好的免费又能工作良好的代码呢?
也就是说,自己动手创建可能是一个很好的学习经验——但这很可能不属于生产应用程序的过程。
好的,那么JavaScript插件呢?
在谈论JavaScript或jQuery插件时,我要说的是,对于任何你使用的具有很好集成选项的真正常见组件来说,情况也是如此。其中的一些例子是照片轮播的JavaScript转盘,或日期选择器。
这里的边缘案例是使用一些带有封装组件逻辑的JavaScript框架的插件(React,Ember,Angular等)。如果你想要做的事情相对简单,有时可能将这些插件放到组件中会更麻烦。
例如,我会使用立即可用的Foundation或Bootstrap模块,如果我正工作于依赖jQuery的项目,但是会在React中构建我自己的模块(只是因为编写组件以便通过引入jQuery插入到React组件中会更容易)
点此链接:总结录制的前端视频和学习路线
8、关注前端代码
最后,我要向你建议的最重要的事情是,你得关注你为前端编写的代码,掌握它,并持之以恒地改进它(统计提高自己!)。
我相信这是长期可维护的应用程序与难以处理的应用程序之间最大的区别因素之一。
通过遵循编写CSS的八个技巧,你将为自己和未来继承你的代码的开发人员节省时间和精力。
译文链接:http://www.codeceo.com/article/8-tips-write-good-css-code.html
英文原文:8 CSS Strategies for Writing Maintainable, Streamlined Front-End Code
如何在内嵌 css 中编写: hover_优秀 CSS 代码的 8 个编写技巧!相关推荐
- css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
- css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
- 怎么在css中加横线分层,CSS分层
为什么要分层? SMACSS BEM SUIT ACSS 原因 CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理 大量的样式,覆盖.权重和很多!importa ...
- css中float详解,CSS浮动属性Float详解?史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
- css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
- css中文本指什么,CSS中的文本属性学习指南
文本缩进 text-indent 值:长度值(正.负均可) 示例:p {text-indent:3em;} 字符间距 letter-spacing 值:任何长度值(正.负值均可). 示例:p {let ...
- css中style怎么用,css中style标签的使用方法
css中style标签的使用方法 发布时间:2020-07-01 09:49:22 来源:亿速云 阅读:141 作者:Leah 这篇文章将为大家详细讲解有关css中style标签的使用方法,文章内容质 ...
- css中auto啥意思,css中auto什么意思?
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
最新文章
- ganglia 监控mysql_Ganglia监控MySQL
- List<Object> 转List<String>
- C语言面试题分享(3)
- 实现离线加域---Windows2008 R2 新功能系列之八
- vim 删除一行_Vim 日常命令
- Linux环境下查看IP不显示IPv4地址
- mysql报tns无监听_oracle提示TNS:无监听程序的解决办法
- 计算机网络分层作业,计算机网络作业布置-参考答案
- python小程序代码_Python解题记录第19题
- 考研数学备考思路和计划制定
- 常用电子面单接口API demo下载
- atmega128 bootloader程序在IAR-AVR下 linker文件的配置及原因
- 安卓手机上有什么好用的日程安排管理软件?
- C# ZPL命令 实现打印中文
- android设置个性桌面,打造小清新手机 安卓桌面 美化全教程
- She Will Be Loved
- 题目 A : 勇士传说
- 不知道视频怎样提取音频?这里有详细教程分享
- python爬取百度图片,自定义关键字和页数
- 非常详细的hi3559A概念版用户手册