CSS コード refactoring_html/css_WEB-ITnose

CSS コード再構築の目的

CSS コードを記述するときは、ページデザインの効果を完成させるだけでなく、CSS コードを管理および保守しやすくする必要があります。 CSS コードをリファクタリングする主な目的は 2 つあります:
1. コードのパフォーマンスを向上させる
2. コードの保守性を向上させる

1. ページの読み込みパフォーマンスを向上させる

2 CSS コードのパフォーマンスを向上させる
さまざまな CSS コードがブラウザによって解析されます。ブラウザの CSS コードの解析速度を向上させる方法も考慮する必要があります

コードの保守性の向上
CSS コードの保守性の向上は主に次の点に反映されます:

一般に、プロジェクトの全体的なデザイン スタイルは一貫している必要があります。ページ内には、同じだがわずかに異なるスタイルを持つモジュールがいくつか存在する必要があります。CSS コードをできるだけ再利用し、新しいコードの追加を最小限に抑えるにはどうすればよいでしょうか。 CSS コードでは非常に重要なポイントです。 CSS コードの再利用性が高ければ、いくつかの異なる箇所を記述するだけで済み、ページのパフォーマンスと保守性が大幅に向上し、開発効率が向上します。

2. スケーラビリティ
製品に特定の機能が追加される場合、新しく追加された CSS コードが古い CSS コードとページに影響を与えないことを確認し、古いコードを再利用しながら新しいコードの追加をできるだけ少なくする必要があります。

モジュールのプロダクト マネージャーがスタイルを変更または削除する必要があると感じた場合、対応する CSS コードが計画されていない場合、しばらくすると開発者はそのコードの機能を覚えていない可能性があります。が複数の場所に配置されており、これを変更または削除することはできません。このままでは、CSS コードがさらに増え、ページのパフォーマンスに影響を及ぼし、コードが複雑になります。

先ほど CSS コードのリファクタリングの目的について説明しましたが、これらの方法は誰でも簡単に理解でき、簡単に実装できます。それは気づかぬうちに。

1.個別の CSS ファイル、ヘッド内 要素内の参照

(1) コンテンツとスタイルが分離され、管理と保守が容易

(3) CSS ファイルをキャッシュして再利用できるため、保守コストが削減される

2、@import は使用しないでください
この方法はすでによく知られていますが、@import は CSS ファイルの読み込み速度に影響します
3. 複雑なセレクターの使用は避けてください。レベルが少ないほど良いです
場合によっては、プロジェクトの数が増えれば増えるほど、関数は複雑になります。私たちが作成する CSS セレクターは内部に複数のレイヤーを持ち、ますます複雑になります。

1

.header .logo .text{}

1

りー

简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。

4、精简页面的样式文件，去掉不用的样式
很多时候，我们会把所有的样式文件合并成一个文件，但是这样有一个问题：很多其他页面的CSS同时引用到当前页面中，而当前页面并没有用到它们，这种情况会造成两个问题：
（1）样式文件偏大，影响加载速度
（2）浏览器会进行多余的样式匹配，影响渲染时间。
正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。
PS：合并成一个文件有一个优点：样式文件会被浏览器缓存，进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待，如果是大项目，应该合并成不同的样式文件，如果是简单的项目，建议合并成一个文件即可。如果无法确认项目规模，建议分开成不同的样式文件，日后要合并也比较方便。

5、利用CSS继承减少代码量
我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。
常见的可以继承的属性比如：
color，font-size，font-family等等
不可继承的比如：
position，display，float等

大家可以查看CSS参考手册

提高可维护性的方法

提高CSS代码的可维护性，简单的说就是要让开发人员易于理解CSS代码，容易去修改它，不会破坏原有的功能。下面说说一些常用的手段。
1、命名与备注
命名是提高代码可读性的第一步，也是及其重要的一步。很多人都有这样的体会：命名是写代码中最让程序员头疼的事情之一，尤其是对母语非英语的开发人员来说，要找一个合适贴切的名字并不容易。提高自己命名的能力，可以多看看别人的代码。下面是CSS中的一些命名相关的建议：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

头：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代码变少，更易于重用和维护。例如下面的例子：
原来的代码是这样：

123456

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

这两个样式的区别在于文字颜色的不同，我们可以将其公共的样式提取出来，然后再分别设置其不同的样式

123456789

.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代码可能是这样的

1234567891011121314

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

这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，我们将其抽象的部分提取出来，结果如下：

12345678910111213

.btn{ width:100px; height:50px; padding:5px 3px;}.primary{ background:red; color:#fff;}.delete{ background:red; color:#fff;}

这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。

（2）容器和内容分离
我们平时写代码一定写过这样代码

1234

.content h3{ font-size:20px; color:#333;}

这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.something h3。
所以OOCSS推荐分离容器和内容，可以修改成：

1234

.title{ font-size:20px; color:#333;}

关于这一点，我个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：

123

.menu li{ font-size:12px;}

这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，即

123

.menu-item{ font-size:12px;}