时间:2021-05-08
1. 重构和架构
重构是指在不改变代码行为的前提下,重写代码,使其更加简洁、易于复用。
架构是指软件项目的各个不同部件之间的组合方式。
优秀的架构:
2. CSS选择器的优先级
用(a, b, c, d)表示,优先级 a>>b>>c>>d,其中:
(ps:伪类和伪元素的区别)
!important 优先级最高,可覆盖行内样式。不可以添加到行内样式属性中。
3. 如何编写优质的 CSS
使用注释
注释记录的内容包括:
保持选择器的简单
div > nav > ul > li > a {}a.nav-link {}.nav-link {}但是并不是任何场景都应遵循该推荐,如下为输入框的文本和边框增加样式。
.error { color: #f00;}input.error { border-color: #f00;}分离 CSS 和 JavaScript
JavaScript 中用来选择元素的类和 ID, 不应该 再用来为元素添加样式。用 JavaScript 修改元素样式时,应该通过增加和删除 类 来实现。
推荐在只用于 JavaScript 的类和 ID 前添加 js- ,或者 ID 只用于 JavaScript 选择元素,类用于样式。
ID和类名要有意义
创建更好的盒子
盒子的尺寸计算方法有 content-box 和 border-box ,推荐在一个项目中坚持使用一种方法,例如:
*,*::after,*::before {}(ps: ::after 表示法是在 CSS3 中引入的, :: 符号是用来区分伪类和伪元素的。支持CSS3的浏览器同时也都支持CSS2中引入的表示法 :after ,IE8仅支持 :after )
为样式分类
按用途定义样式,有助于创建更优秀的架构,因为将样式组织为不同的类别,促使代码可预测性更强,更易于复用。
通用样式
因为不同浏览器的默认样式有些许差别,所以需要 通用样式 为各种元素的属性设置默认值样式,使其在不同浏览器
表现一致。
推荐 Nicolas Gallagher 和 Jonathan Neal 开发的normalize.css,可根据自己的项目适当删减。
基础样式
用类型选择器和结合符(例如,ul ul表示ul下面的ul)或者伪类为 HTML 元素添加更加细致的样式。比如: color 、 font-family 、 font-size 、 letter-spacing 、 line-height 、 margin 、 padding 等。
HTML 元素可分为:区块元素、标题和文本元素、锚点元素、文本语义元素、列表、表格、表单等等,不同的元素在基础样式的设置上稍有不同,可参考 元素基础样式表 。
组件样式
组件重要的是可复用性,如:按钮、下拉菜单、模态框、选项卡等。
功能样式
合理使用 !important 定义类属性,在 JavaScript 操作样式时使用。如添加下面这个类来实现元素隐藏:
.hidden { display: none !important;}浏览器特定样式
尽管未来浏览器行为趋于统一,但目前一些老的浏览器仍然有怪癖行为。我们不得不使用一些 hack 的样式来解决这些怪癖行为,推荐将这些样式单独放在一个样式表中,并用 条件注释 添加引用。
<!--[if IE 8]> <link rel="stylesheet" href="ie8.css" /><![endif]-->维护代码
代码规范
代码规范是将良好的代码编写方法记录下来形成指南,以鼓励团队所有成员以相同的方法编写代码。规范应定期审阅和更新。CSS 代码规范通常指定了注释、格式、命名、选择器用法等方便的规范。
模式库
模式库是网站使用的一组用户界面模式,将所有组件汇集在一起。好处就是参与项目的成员都能了解到搭建网站的各个模块,熟悉背后的原理,并且有助于保证用户界面的一致性。
推荐几个优秀的模式库:
代码的组织和重构策略
按照样式从最不精确到最精确组织 CSS
之前我们为样式分类,现在我们按照产生作用的顺序再来组织一下 CSS 代码:
PS:媒体查询要靠近相关声明块,这样做可以为样式是如何起作用的提供更多的背景信息。
重构前审查 CSS
如下审查非常有助于重构:
CSS Dig 是 Google Chrome 的一款插件,可以帮助获取以上信息。
重构策略
推荐多次小范围重构,避免大范围重构引入错误。
(1)删除僵尸代码:
没有使用的声明块、重复的声明块和声明语句。
(2)分离 CSS 和 JavaScript
(3)分离基础样式
如果一个类型选择器使用过多次,新建一条规则集,找到最常用的属性,添加到新的规则集。从其他规则集删除重复的属性,因为它们可以继承新定义的基础样式。
body > div > h1 { color: #000; font-size: 32px; margin-bottom: 12px;}.section-condensed h1 { color: #000; font-size: 16px;}.order-form h1 { color: #333; text-decoration: underline;}h1 { color: #000; font-family: Helvetica, san-serif; font-size: 32px; line-height: 1.2;}body > div > h1 { margin-bottom: 12px;}.section-condensed h1 { font-size: 16px;}.order-form h1 { color: #333; text-decoration: underline;}(4)删除冗余的 ID
#main-header ul#main-menu {}#main-menu {}(5)定义可复用的组件,删除重复的 CSS
(6)删除行内 CSS
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
上海网站建设解答网站为什么应该使用DIV+CSS最好 一、精简代码,建设重构难度。 网站使用div+css布局使代码很是精简,相信大家也是略有所闻,cs
网站建设与网站改版需要进行DIV+CSS重构吗?我们都知道在网站建设过程中是否需要利用DIV+CSS布局、或者网站改版是否需要进行DIV+CSS重构,是乎一
现在大部分网页都是采用了DIV+CSS进行网站制作。用DIV+CSS代替传统的Table制作框架。百度搜索优化在重构之前,肯定要了解为什么重构,为什么要用D
在软件工程学里,重构代码一词通常是指在不改变代码的外部行为情况下而修改源代码。软件重构需要借助工具完成,而重构工具能够修改代码同时修改所有引用该代码的地方。本文
本篇总结了一些css常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西。一.使用css缩写使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写