CSS コードの再構築と最適化への道_html/css_WEB-ITnose

CSS を作成する学生は、プロジェクトの規模が大きくなるにつれて、CSS コードのメンテナンスが間に合わないと、プロジェクト内の CSS コードの数が増え続けることによく気づきます。 。 CSS コードは、Web サイト上のさまざまな場所に分散された巨大なクモの巣のように絡み合って複雑です。このコード行を変更することがどのような影響を与えるかわからないため、変更や新機能が追加されたとしても、開発者はあえて変更しないことがよくあります。古いものは削除してください。冗長なコードと新しいコードを安全に追加することの最大の欠点は、プロジェクト内に CSS がどんどん増えていき、最終的には底なしの穴に陥ることです。

CSS コード再構築の目的

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

CSS コードのパフォーマンスを向上させるには、主に 2 つのポイントがあります:

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 ファイル、ヘッド内 要素内の参照

利便性や迅速な機能のために、ページのスタイル タグにスタイルを直接記述するか、要素に直接インラインでスタイルを記述することがあります。これはシンプルで便利ですが、非常に有害です。今後のメンテナンスに。コードを個別の CSS ファイルとして記述することには、いくつかの利点があります:

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

(2) ページ サイズが削減される

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

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

セレクターのネストは、次のような 3 レベルを超えないようにすることをお勧めします。

.header .logo .text{}

は

.haeder .logo-text{}

に最適化できます

簡潔なセレクターは、CSS ファイルのサイズを削減するだけでなく、読み込みパフォーマンスを向上させることができますこれにより、ブラウザの解析時間が短縮され、開発者の開発効率が向上し、メンテナンス コストも削減されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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命名法写样式如下：
.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) 最初のステップは、ページのスケルトンを設定することです。それはベーススタイル、レイアウトスタイルです。
(2) 2 番目のステップは、異なるモジュールを順番に実装することです。ここでは、BEM の名前付けのアイデアをお勧めしますが、1 つまたは 2 つのレベルのセレクター構造をネストすることができます
3. コードを最適化します。基本的なページ効果 最後に、まだ重複したコードや簡潔でないコードがいくつかありますが、主に重複したコードを抽出してコードを可能な限り合理化するために、これらのコードを最適化する必要があります。

CSS コードの最適化に関しては、皆さんいろいろな意見があると思いますので、意見交換や議論は大歓迎です。