本文主要讲解“CSS代码重构和优化的方法有哪些？”感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“CSS代码重构和优化的方法有哪些”！
CSS代码重构的目的我们在编写CSS代码时，不仅要完成页面设计的效果，还要让CSS代码易于管理和维护。CSS代码重构有两个主要目的：
1.提高代码性能
2.提高代码可维护性和代码性能。
有两个要点可以提高CSS代码的性能：
1.提高页面的加载性能。
要提高页面的加载性能，简单来说就是减小CSS文件的大小，提高页面的加载速度，充分利用http缓存。
2.提高CSS代码的性能
浏览器对不同的CSS代码有不同的解析速度。如何提高浏览器对CSS代码的解析速度也是我们要考虑的问题。提高CSS代码的可维护性主要体现在以下几点：
1.复用性
一般来说，一个项目的整体设计风格是一样的，页面中肯定有几个风格相同但略有不同的模块。如何尽可能地重用CSS代码，尽可能少地添加新代码，是CSS代码中非常重要的一点。如果CSS代码的可重用性高，我们可能只需要写一些与众不同的东西，这对页面的性能、可维护性和开发效率都有很大的帮助。
2.可量测性
如果产品增加了某个功能，就要保证新增加的CSS代码不会影响旧的CSS代码和页面，尽量少增加新代码，重用旧代码。
3.可变性
如果一个模块的产品经理觉得需要修改样式或者删除，如果对应的CSS代码没有规划好，一段时间后，开发人员可能已经忘记了这段代码的几个功能，不敢修改或者删除。这样一来，CSS代码会越来越多，会影响页面的性能，造成代码的复杂。CSS代码重构的基本方法
我们讨论了CSS代码重构的目的。现在我们来谈谈如何达到这些目的的一些基本方法。这些方法很容易理解和实施，平时我们可能会不自觉地使用。提高CSS性能的手段首先，谈谈如何提高CSS性能。根据页面加载性能和CSS代码性能，总结出以下几点：
1.尝试在单独的css文件中编写样式，并在head元素中引用它。
有时，为了方便绘图或快速获得功能，我们可能会直接在页面的样式标签中编写样式，或者直接与元素内联。虽然这样简单方便，但对以后的维护非常不利。将代码作为单独的css文件编写有几个优点：
(1)内容和风格分离，易于管理和维护。
(2)减小页面大小。
(3)css文件可以缓存和重用，降低了维护成本。
2.不要使用@import
这个方法是众所周知的，这里简单提一下：@import影响css文件的加载速度。
3.避免使用复杂的选择器。层次越少越好。
有时候项目中的模块越来越多，功能越来越复杂，我们编写的CSS选择器会有多个层次，变得越来越复杂。
建议选择器的嵌套不要超过三个级别，例如：
header.logo.text{}
可以优化为
haeder.logo-text{}
一个简洁的选择器不仅可以减少css文件的大小，提高页面的加载性能，还可以使浏览器解析更加高效，提高开发人员的开发效率，降低维护成本。
4.精简页面的样式文件并删除未使用的样式。
很多时候，我们会把所有的样式文件合并到一个文件中，但是有一个问题：很多其他页面的CSS同时引用当前页面，但是当前页面不使用它们，这就会造成两个问题：
(1)样式文件过大，影响加载速度。
(2)浏览器会进行多余的样式匹配，影响渲染时间。
正确的处理方式是根据当前页面需要的css，将当前页面使用的CSS文件进行组合。
PS:合并成一个文件有一个好处：样式文件会被浏览器缓存，其他页面的样式文件就不需要下载了。这个规则要根据场景区别对待。如果是大项目，应该合并成不同的样式文件。如果是简单的项目，建议合并成一个文件。如果无法确认项目的规模，建议将其拆分为不同的样式文件，以后合并更方便。
5.使用CSS继承减少代码量
我们知道有些CSS代码是可以继承的。如果父元素已经设置了样式，那么子元素就不需要设置样式，这也是提高性能的有效方法。
常见的可继承属性，例如：
颜色、字体大小、字体系列等。
不可继承，例如：
位置、显示、浮动等
您可以查看CSS参考手册，了解提高CSS代码可维护性的方法。简单来说，就是让开发者容易理解CSS代码，并在不破坏原有功能的情况下进行修改。我们来谈谈一些常见的方法。
1.命名和备注
命名不仅是提高代码可读性的第一步，也是极其重要的一步。很多人都有这样的经历：命名是程序员在编写代码时最麻烦的事情之一，尤其是非英语开发人员，要找到一个合适的名称并不容易。提高自己
己命名的能力，可以多看看别人的代码。下面是CSS中的一些命名相关的建议：
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签:tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
2、提取重复样式
这一个方法很容易理解，简单说就是提取相同的样式成为一个单独的类再引用，这样不仅可以精简CSS文件大小，而且CSS代码变少，更易于重用和维护。例如下面的例子：
原来的代码是这样：
CSS Code复制内容到剪贴板
-
.about-title{
-
margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px;
-
font-size: 2rem;
-
}
-
.achieve-title{
-
margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px;
-
font-size: 2rem;
-
}
这两个样式的区别在于文字颜色的不同，我们可以将其公共的样式提取出来，然后再分别设置其不同的样式
CSS Code复制内容到剪贴板
-
.column-title{
-
margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem;
-
}
-
.about{
-
color: #333;
-
}
-
.achieve{
-
color:#fff;
-
}
提取公用的部分，然后在页面上分别引用column-title和about等，这样代码更简洁，维护起来也更方便了。这个例子非常简单，实际上项目中可能有更复杂的情况，总之就要要尽可能的DRY，尽可能的提取重复的东西。
3、书写顺序
这个书写顺序指的是各个样式的书写顺序，下面是推荐的CSS书写顺序
（1）位置属性(position, top, right, z-index, display, float等)
（2）大小(width, height, padding, margin)
（3）文字系列(font, line-height, letter-spacing, color- text-align等)
（4）背景(background, border等)
（5）其他(animation, transition等)
书写顺序不一定非得按照上面的推荐来进行，而是根据你自己的习惯，但是最好能保证前后的习惯一致的，或者团队应该有一个共同的代码规范去遵守，这样后期维护起来也会方便许多。
以上是我个人总结的一些简单的写好和重构CSS代码的方法，大家当然不必拘泥于此，有不同的意见和建议欢迎进行交流！
CSS方法论
什么是CSS方法论呢？简单地说就是一些同行为了提高CSS的可维护性、提出的一些编写CSS代码的规范和方法。他们提出了一些概念，这些概念可能听起来很高大上，但是实际你平时可能不知不觉也会用到这些所谓的CSS方法论。下面我简单地介绍下几个比较常见的CSS方法论。
OOCSS
OOCSS是（Object Oriented CSS），顾名思义就是面向对象的CSS。
OOCSS主要有两个原则：
1、结构和样式分离
我们平时一定遇到过这种情况，比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离，我们的CSS代码可能是这样的
CSS Code复制内容到剪贴板
-
.btn-primary{
-
width:100px;
-
height:50px;
-
padding:5px 3px;
-
background:#ccc;
-
color:#000;
-
}
-
.btn-delete{
-
width:100px;
-
height:50px;
-
padding:5px 3px;
-
background:red;
-
color:#fff;
-
}
这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，我们将其抽象的部分提取出来，结果如下：
CSS Code复制内容到剪贴板
-
.btn{width:100px;height:50px;padding:5px 3px;}
-
.primary{background:red;color:#fff;}
-
.delete{background:red;color:#fff;}
这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。
（2）容器和内容分离
我们平时写代码一定写过这样代码
CSS Code复制内容到剪贴板
-
.content h4{
-
font-size:20px;
-
color:#333;
-
}
这样的代码就是内容依赖于容器，没有分离的代码，也就是说h4的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.something h4。
所以OOCSS推荐分离容器和内容，可以修改成：
CSS Code复制内容到剪贴板
-
.title{
-
font-size:20px;
-
color:#333;
-
}
关于这一点，我个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：
CSS Code复制内容到剪贴板
-
.menu li{
-
font-size:12px;
-
}
这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，即
CSS Code复制内容到剪贴板
-
.menu-item{
-
font-size:12px;
-
}
这样页面的li标签需要引用menu-item类。
当然采用哪一种方式更好我也不却确定，我自己比较喜欢.menu li的写法，大家自行思考。
这就是OOCSS的两个基本原则，这里只是简单介绍OOCSS，各位如果有兴趣的话请自行Google查找相关资料。
SMACSS
SMACSS是什么呢，它的全称是Scalable and Modular Architecture for CSS。简单说就是可扩展和模块化的CSS架构。
SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme，我们简单来说说每一种类型分别指什么。
1、Base
基础样式表，定义了基本的样式，我们平时写CSS比如reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也可以归类为基础样式。
2、Layout
布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。
3、Module
网页中不同的区域有这个不同的功能，这些功能是相对独立的，我们可以称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，可以安全的删除修改而不影响其他模块。
4、State
状态样式，通常和js一起配合使用，表示某个组件或功能不同的状态，比如菜单选中状态，按钮不可用状态等。
关于状态样式，我个人觉得要分情况进行讨论：
（1）不同组件的同一状态的样式是一样的，比如头部的导航菜单的选中状态样式和侧栏的菜单选中状态样式是一样的，我认为这部分状态样式可以归类为State
（2）不同组件的统一状态的样式是不一样的，即两个地方的菜单虽然都是选中状态，但是他们却又不同的选中样式，这部分样式不应该被认为是State类型，而是应该放在其组件对应的Module中。
5、Theme
皮肤样式，对于可更换皮肤的站点来说，这个是很有必要的，分离了结构和皮肤，根据不同的皮肤应用不同的样式文件。
BEM
BEM是Block，Element，Modifier的缩写。下面分别来介绍一下这三个概念：
（1）Block：在BEM的理论中，一个网页是由block组成的，比如头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。
（2）Element：element是block的一部分，具有某种功能，element依赖于block，比如在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个element
（3）Modifier：modifier是用来修饰block或者element的，它表示block或者element在外观或行为上的改变
我们通过BEM命名法写样式如下：
CSS Code复制内容到剪贴板
-
.block{}
-
.block-element{}
-
.block-modifier{}
-
.block-element-modifier{}
BEM将页面解析为block和element，然后根据不同的状态使用modifier来设置样式。
我对BEM的思想理解可能不到位，对BEM的看法主要是由两点：
（1）页面CSS模块化，每个block就是一个模块，模块间相互独立
（2）多级的class命名，避免选择器的嵌套结构
关于CSS方法论
上面提到的这些CSS方法论，大家看了就会发现，它们其实有很多思想是相同的，比如：
1、选择器的嵌套的优化
2、CSS代码模块化
3、抽象CSS代码
…
这些方法论，我们学习的时候，最重要的是去理解其思想，不一定非得照搬它的实现形式，多种方法结合使用。
我自己总结的方法
谈了这么多，下面来说说我自己总结的写CSS代码的一些关键点。
1、写代码之前：从PSD文件出发
当我们拿到设计师给的PSD时，首先不要急于写CSS代码，首先对整个页面进行分析，主要关注点是下面几个：
（1）页面分成了几个模块，哪些模块是公用的，常见的比如头部和底部，还有一些菜单栏等等
（2）分析每一个模块都有什么样式，提取出公用的样式，注意公用样式是全局公用（整个页面公用）还是局部公用（模块内公用），公用样式包括公用的状态样式，比如公用的选中状态，禁用状态等等。
2、开始写代码
根据对PSD文件的分析，我们就可以开始着手写代码，我比较推荐SMACSS将样式分成不同类型的做法：
（1）第一步是搭好页面的骨架，也就是base样式，layout样式。
（2）第二步就是依次实现不同的模块，在这里我推荐BEM的命名思想，但是可以嵌套一到两层的选择器结构
3、优化代码
我相信当我们完成基本的页面效果后，还是会存在着一些重复的或者不够简洁的代码，这时候就是要去优化这些代码，主要是在提取重复代码，尽可能地精简代码。
到此，相信大家对“CSS代码重构与优化的方法有哪些”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/142066.html