CSS コード refactoring_html/css_WEB-ITnose

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 レベルを超えないようにすることをお勧めします。

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

そのようなページの li タグは、メニュー項目クラスを参照する必要があります。
もちろん、どちらの方法が良いかはわかりません。私は .menu li の書き方を好むので、それについては自分で考えてください。
これらは OOCSS の 2 つの基本原則です。ここでは OOCSS について簡単に説明します。興味がある場合は、Google で関連情報を検索してください。

SMACSS

SMACSS とは何ですか? 正式名称は Scalable and Modular Architecture for CSS です。簡単に言えば、これは拡張可能なモジュール式の CSS アーキテクチャです。
SMACSS は、スタイルをベース、レイアウト、モジュール、状態、テーマの 5 つのタイプに分類します。各タイプが何を指すのかについて簡単に説明します。
1. Base
基本スタイルシートは、reset.cssなどのCSSを書く際に基本的なスタイルを定義するもので、その他にfloatのクリアや一部のアニメーションも基本スタイルに分類されると思います。 。

2. レイアウト
レイアウト スタイルは、Web ページの基本レイアウトを実装し、Web ページ全体の基本的な骨格を構築するために使用されます。

3. モジュール
Web ページの異なる領域には異なる機能があり、これらの機能はモジュールと呼ぶことができます。モジュールは、レイアウト コンポーネントに依存しない独立した再利用可能なコンポーネントであり、他のモジュールに影響を与えることなく安全に削除および変更できます。

4. State
State スタイルは通常 js と一緒に使用され、メニューが選択された状態、ボタンが使用できない状態など、コンポーネントまたは関数のさまざまな状態を表します。
状態スタイルについては、ケースバイケースで議論する必要があると個人的には考えています。
(1) 異なるコンポーネントの同じ状態のスタイルは同じです。たとえば、ナビゲーション メニューの選択状態スタイルは同じです。サイドバーメニューの先頭と選択された状態のスタイルは同じですが、この部分の状態スタイルは状態として分類できると思います
(2) 異なるコンポーネントの統合された状態のスタイルは異なります。 2 つの場所のメニューは両方とも選択状態にあり、異なる選択スタイルを持っています。この一部のスタイルは状態タイプとみなされるべきではありませんが、それらのコンポーネントに対応するモジュールに配置される必要があります。

5. スキン スタイル、交換可能なスキンを持つサイトの場合、これは非常に必要です。構造とスキンを分離し、異なるスキンに応じて異なるスタイル ファイルを適用します。

BEM

BEMとは、Block、Element、Modifierの略です。これら 3 つの概念をそれぞれ紹介します:

(1) ブロック: BEM 理論では、Web ページはブロックで構成されます。たとえば、ヘッダーはブロック、コンテンツはブロック、ロゴもブロックです。ブロックは複数のサブブロックで構成される場合があります。
(2) 要素: 要素はブロックの一部であり、ブロックに依存します。たとえば、ロゴの場合、メニュー項目はロゴの要素です。
(3) 修飾子: 修飾子は、ブロックまたは要素の外観または動作の変更を表します:
.block{}
.block-element{}
.block-modifier {}
.block-element-modifier{}
BEM はページをブロックと要素に解析し、修飾子を使用してさまざまな状態に応じてスタイルを設定します。
BEM に関する私の理解は、主に 2 つの点に基づいています:
(1) ページ CSS のモジュール化、各ブロックはモジュールであり、モジュールは互いに独立しています
(2) マルチレベルクラスの名前付け、セレクターの入れ子構造を避ける

CSS 方法論について

上記の CSS 方法論を読むと、実際には次のような多くの共通のアイデアがあることがわかります。

1. セレクターの入れ子 最適化

2、 CSS コードのモジュール化
3、抽象 CSS コード
...
これらの方法論を研究するとき、最も重要なことは、その実装形式をコピーしたり、方法を組み合わせて使用​​したりする必要はありません。

私自身の方法

ここまでお話してきたので、私がまとめた CSS コードの書き方の重要なポイントについて話しましょう。
1. コードを書く前に: PSD ファイルから始めます
デザイナーから PSD を受け取ったら、最初に CSS コードを急いで書かないでください。主な焦点は次のとおりです。 (1) ページ ヘッダーや下部、一部のメニューバーなど、共通するモジュールをいくつかのモジュールに分割します。 (2) 各モジュールのスタイルを解析し、共通するスタイルを抽出します。グローバル パブリック (ページ全体に共通) かローカル パブリック (モジュール内で共通) のいずれであっても、パブリック スタイルには、パブリックに選択された状態、無効な状態などのパブリック状態スタイルが含まれます。
2. コードの作成を開始します
PSD ファイルの分析に基づいて、SMACSS を使用してスタイルをさまざまなタイプに分割してコードの作成を開始できます。
(1) 最初のステップは、ページのスケルトンを設定することです。それはベーススタイル、レイアウトスタイルです。
(2) 2 番目のステップは、異なるモジュールを順番に実装することです。ここでは、BEM の名前付けのアイデアをお勧めしますが、1 つまたは 2 つのレベルのセレクター構造をネストすることができます
3. コードを最適化します。基本的なページ効果 最後に、まだ重複したコードや簡潔でないコードがいくつかありますが、主に重複したコードを抽出してコードを可能な限り合理化するために、これらのコードを最適化する必要があります。

転載元: http://www.aspnetjia.com/Cont-150.html