CSS のパフォーマンスを最適化および向上させる方法のまとめ

CSS の最適化は主に 4 つの側面に焦点を当てています:

1. 読み込みパフォーマンス
   この側面に関連するベスト プラクティスは、インターネットで検索すると大量の情報が見つかります。圧縮など、主にファイル サイズの削減、ブロックされた読み込みの削減、同時実行性の向上から始まり、これらの一般的な方向性から逃れることはできません。

2. セレクターのパフォーマンス
   しかし、セレクターが全体的なパフォーマンスに与える影響は無視できます、セレクター 検査では標準化、保守性、堅牢性が重視されますが、実際の作業ではセレクターのパフォーマンスに注目する人はほとんどいませんが、この GitHub シェアで述べられているように、知らないよりは知っている方が良いです。

3. レンダリング パフォーマンス
   レンダリング パフォーマンスは、CSS 最適化の最も重要な焦点です。ジャンクなページのレンダリングが多すぎますか? text-shadow が広範囲に使用されているかどうかを確認してください。フォントのアンチエイリアスを有効にしていますか? CSSアニメーションはどのように実装されているのでしょうか？ GPU アクセラレーションは適切に活用されていますか?フレキシブルボックスモデルは何を使用しましたか?レイアウト戦略の変更がレンダリング パフォーマンスに及ぼす影響をテストしましたか?この点については、CSS レンダリング パフォーマンスや CSS アニメーション パフォーマンスについて検索すると、参考になる情報がたくさんあります。

4. 保守性、堅牢性
   ネーミングは合理的ですか？構造階層設計は十分に堅牢ですか?スタイルは抽象的に再利用されていますか?エレガントな CSS は、後のメンテナンス コストに影響を与えるだけでなく、読み込みパフォーマンスやその他の側面にも影響します。この点に関して、OOCSS (OOCSS を使用しなければならないということではありませんが、OOCSS についてもっと学ぶ必要があります) やその他のさまざまな CSS 戦略に関する詳細情報を見つけて、お互いの長所を学ぶことができます。

NO2

【CSSコードの再構築と最適化への道】

CSSを書く学生は、プロジェクトの規模が大きくなるにつれて、プロジェクト内の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.スタイルをaで書いてみます。 head 要素で参照される別の css ファイル

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

6.すでによく知られていますが、簡単に説明すると、@import は CSS ファイルの読み込み速度に影響します

3. 複雑なセレクターの使用を避け、レ​​ベルが少ないほど良いです

プロジェクトには、より多くのモジュールと関数が含まれる場合があります。ますます複雑になるにつれて、私たちが作成する CSS セレクターは内部に複数のレイヤーを持ち、ますます複雑になります。

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

.header .logo .text{}

.haeder .logo-text{}

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

4. ページのスタイル ファイルを合理化し、未使用のスタイルを削除します

多くの場合、すべてのスタイル ファイルを 1 つのファイルにマージしますが、問題があります。他の多くのページの CSS が現在のページで参照されているということです。この状況では、次の 2 つの問題が発生します:

(1) スタイル ファイルが大きすぎるため、読み込み速度に影響します

(2) ブラウザは冗長なスタイル マッチングを実行します。レンダリング時間に影響します。

正しい方法は、現在のページで必要な CSS に従って、現在のページで使用されている CSS ファイルをマージすることです。

PS: 1 つのファイルに結合すると、スタイル ファイルがブラウザによってキャッシュされ、他のページに入るときにスタイル ファイルをダウンロードする必要がないという利点があります。このルールは、シナリオに応じて異なる方法で処理する必要があります。大規模なプロジェクトの場合は、別のスタイル ファイルにマージする必要があります。単純なプロジェクトの場合は、1 つのファイルにマージすることをお勧めします。プロジェクトの規模が確認できない場合は、別のスタイル ファイルに分割することをお勧めします。これにより、将来マージしやすくなります。

5. CSS継承を利用してコード量を減らす

一部のCSSコードは親要素がスタイルを設定している場合、子要素はスタイルを設定する必要がないことがわかっています。パフォーマンスを向上させる方法。

一般的な継承可能なプロパティ:

color、font-size、font-family など

非継承プロパティ:

位置、表示、float など

保守性を向上させる方法

CSS コードの保守性の向上とは、開発者が CSS コードを理解し、元の機能を破壊することなく修正しやすくすることを意味します。いくつかの一般的な方法について説明しましょう。

1. ネーミングと備考

ネーミングはコードの可読性を向上させるための第一歩であり、非常に重要なステップでもあります。多くの人が次のような経験をしています。プログラマーにとって、コードを記述するときに名前付けは最も面倒な作業の 1 つであり、特に英語を母国語としない開発者にとって、適切で適切な名前を見つけるのは簡単ではありません。命名スキルを向上させるために、他の人のコードを参照することができます。 CSS での名前付け関連の提案をいくつか示します。

ヘッダー: header

コンテンツ: content/container

フッター: footer

ナビゲーション: nav

サイドバー: Sidebar

列: column

ページ周辺機器コントロール全体のレイアウト幅:wrapper

左右中央:左右中央

ログインバー:loginbar

ロゴ:ロゴ

広告:バナー

ページ本文:メイン

ホットスポット:ホット

ニュース:ニュース

ダウンロード:ダウンロード

サブナビゲーション:subnav

メニュー:menu

サブメニュー:submenu

検索:search

フレンドリーリンク:friendlink

フッター:footer

著作権:copyright

スクロール:scroll

コンテンツ:content

タグ:タグ

記事リスト: list

プロンプト情報: msg

ヒント: ヒント

コラムタイトル: title

参加: joinus

ガイド: guide

サービス: service

登録: 登録者

ステータス: 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;
　　}

これら 2 つのスタイルの違いは、テキストの色が異なることです。共通のスタイルを抽出し、それぞれに異なるスタイルを設定できます。

　　.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{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　}
　　.primary{
　　background:red;
　　color:#fff;
　　}
　　.delete{
　　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 forCSS。简单说就是可扩展和模块化的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)第一步是搭好页面的骨架，也就是base样式，layout样式。

　　(2)第二步就是依次实现不同的模块，在这里我推荐BEM的命名思想，但是可以嵌套一到两层的选择器结构

　　3、优化代码

　　我相信当我们完成基本的页面效果后，还是会存在着一些重复的或者不够简洁的代码，这时候就是要去优化这些代码，主要是在提取重复代码，尽可能地精简代码。

NO3：

css性能优化的地方很多，结合以上几位大神的回答，总结如下：
1.慎重使用高性能属性：浮动、定位；
2.尽量减少页面重排、重绘
重排按照css的书写顺序：
位置：positon、top、left、z-index、float、dispay
大小：width、height、margin、padding
文字系列： font、line-height、color、letter-spacing
背景边框：background、 border
其它：anmation、transition
重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;
3.去除空规则：｛｝；
4.属性值为0时，不加单位；
5.属性值为浮动小数0.**，可以省略小数点之前的0；
6.标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；
7.不使用@import前缀，它会影响css的加载速度；
8.充分利用css继承属性，减少代码量；
9.抽象提取公共样式，减少代码量；
10.选择器优化嵌套，尽量避免层级过深；
11.css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
12.将css文件放在页面最上面

.....

以上がCSS のパフォーマンスを最適化および向上させる方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。