CSS の姿勢を改善する_html/css_WEB-ITnose

CSS の学習は、敷居が低く、ボトルネックが大きい典型的なプロセスです。私が初めて CSS に触れたとき、後から学べば学ぶほど、自分が何も知らなかったことに気づきました。 Zhang Xinxu 先生の「CSS 学習のボトルネックについて話しましょう」を読みました。この記事では、スケーラブルで保守可能な CSS コードを作成する方法を 4 つの側面から説明します:

• 合理的なセマンティック命名を使用する

• モジュール化

• 命名規則に従う

• 単一責任原則に従う

適切なセマンティクスを使用する: 合理的なセマンティックな名前を使用します

セマンティック マークアップの概念は HTML と CSS の両方に存在します。HTML での簡単な表現は次のとおりです:

<!-- bad --><div class=”footer”></div><!-- good --><footer></footer>

セマンティック HTML は特定のタグの機能を表現できます。一方、セマンティック CSS はより抽象的で主観的になります。セマンティック CSS コードを記述するということは、構造的および機能的な情報をシンプルかつ明確な方法で反映するスタイル クラス名を選択することを意味します。一方、スタイル クラスに名前を付けるときにあまり具体的にする必要はなく、スタイル クラスの再利用も容易になります。

ここでは、Medium の CSS を使用して説明します:

<div class="stream"> <div class="streamItem">   <article class="postArticle">     <div class="postArticle-content">       <!-- content -->     </div>   </article> </div></div>

上記のコードから、構造、役割、意味をすぐに識別できます。親クラスは stream で、一連の記事のリストを表します。最初のサブクラスは streamItem で、これはリスト内の記事のエンティティであり、サブクラスと親クラスの間の従属関係を明確に示します。さらに、このようなクラスと構造は、記事を含む任意のページで再利用できます。 HTML と CSS コードをより読みやすくするには、本のようにするのではなく、物語のようにする必要があります。物語には登場人物と登場人物間の関係があり、このよりセマンティックな CSS は、全体の保守性をより良く思い出させてくれます。コード。詳細を読むために推奨される記事をいくつか紹介します:

• セマンティックなクラス名を作るもの

• CSS の命名は本当に難しい

• セマンティクスと感性

• [HTML について]セマンティクスとフロント-エンドアーキテクチャ] (

http://nicolasgallagher.com/about-html-semantics-front-end-architecture/)

モジュール化: Modularize

React のようなコンポーネントベースのプロジェクトでは、モジュール化が基本的なガイドラインです。再利用可能で構成可能なモジュールを作成することで、システム全体を合理的に分離できます。

上の図の各青いブロックはコンポーネントを表します:

<div class="stream"> <div class="streamItem">   <!-- product info --> </div></div>

ほとんどのコンポーネントはより小さなコンポーネントに分割できます:

各ストリーム項目にはサムネイルと機能情報が含まれます:

<!-- STREAM COMPONENT --><div class="stream"> <div class="streamItem">    <!-- POST COMPONENT -->   <div class="post">     <img src="thumbnail.png" class="postThumbnail"/>     <div class="content">       <!-- product info -->     </div>   </div>  </div></div>

ストリーム コンポーネントにはサブコンポーネントに依存しないため、ストリーム クラスに大きな影響を与えることなく、ポスト クラスを自由に変更できます。一般に、コード間の結合度が低いほど、コードの変更と保守が容易になります。

さらに読む:

• CSS アーキテクチャ: スケーラブルでモジュール化されたアプローチ

• Sass を使用したモジュール式 CSS の作成

• 長期的な保守性と健全性のためのフロントエンド コードのモジュール化

良いものを選んでください一つの命名規則

既に優れた CSS 命名規則は数多くありますが、それでも私にとって最適な CSS 命名規則は、作成者自身の感覚として、最も心地よい命名規則を選択し、それを仕様に合わせて変換することです。あなた自身のプロジェクト。

• オブジェクト指向 CSS OOCSS

• ブロック要素修飾子 (BEM)

• CSS 用のスケーラブルなモジュラー アーキテクチャ (SMACSS)

• アトミック

私が個人的に気に入っている命名規則の 1 つは BEM です。

BEM は最も単純ですが、最も厳密な命名規則でもあります:

.block {}.block__element {}.block--modifier {}

上記のコードのブロックはいくつかの高レベルのクラスを表し、要素はブロックのサブ要素であり、修飾子はさまざまな状態を表します。

<div class="search"><input type="search__btn search__btn--active" /></div>

上の例では、検索クラスは Block であり、検索ボタンはその子要素の 1 つです。ボタンの状態を変更したい場合は、active と同様の Modifier を追加する必要があります。さらに、将来的には、作業するコード ベースに複数の命名規則が存在する可能性があることを覚えておく必要があり、互換性を維持し、他の標準を受け入れて学習できるようにする必要もあります。 BEM についてさらに深く理解したい場合は、次の記事を読むことができます:

• BEM 構文を理解する

• BEM 101

• Intro to BEM

• OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?

遵循单一职责原则

SRP原则即只每个模块或者类只应承担软件系统中的某个单一功能，并且该职责应该完整地封装在类的内部，即对外屏蔽内部实现。而具体到CSS的领域里，SRP意味着某个代码片、类或者模块只应该做一件事。而在CSS的文件组织上，意味着像Carousels、Navigation Bar这样的组件应该有自己独立的CSS文件。

/components   |- carousel  |- |- carousel.css  |- |- carousel.partial.html  |- |- carousel.js  |- nav  |- |- nav.css  |- |- nav.partial.html  |- |- nav.js

另一个常见的文件组织方式就是按照功能进行文件组织，举例而言，在上述的代码片中，所有关于Carousel的文件都应该被放到同一个文件夹中。通过这种方式可以将文件索引变得更加容易。同样地，对于常见的全局样式而言，也需要适用于独立地全局样式：

/base  |- application.css   |- typography.css  |- colors.css  |- grid.css

在上述例子里，不同类型的全局样式需要分割到不同的文件中，这样的话如果你需要去更改你的颜色等等样式，那就很容易找到修改哪个文件。无论哪种文件组织方式比较顺眼，你都应该遵循统一的SRP原则。如果某个文件变得冗余臃肿，你应该考虑根据逻辑或者其他东西对内容进行切分。关于文件组织结构与CSS结构方面地深入阅读：

• Aesthetic Sass 1: Architecture and Style Organization

• Scalable and Maintainable CSS Architecture .

对于每个独立的CSS类而言，都应该只包含一个功能。换言之，应该根据关注点的差异将样式切分到不同的类中，这里有个小例子：

.splash {  background: #f2f2f2;  color: #fffff;  margin: 20px;  padding: 30px;  border-radius: 4px;  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

在上面这个例子里，我们搞错了某些关注点， splash 类不仅包含了其自己的展示的样式与逻辑，还定义了部分关于其子元素的样式，因此需要切分到两个单独类中：

.splash {  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;}

.splash__content {  background: #f2f2f2;  color: #fffff;  padding: 30px;  border-radius: 4px;}

深入阅读：

• The single responsibility principle applied to CSS

• Single Responsibility .