クリーンなコード：HTML /CSSEssentialsが依然として重要である理由
公開: 2022-03-1115年間のWeb開発の経験の中で、私は企業レベルからスタートアップまで、さまざまな企業と協力してきました。その過程で、多くの仲間のソフトウェアエンジニアと協力してきました。 私がプロジェクトで遭遇した最も一般的で重要な問題の1つは、クリーンで理解しやすいコードを記述できないことです。
一流企業の最高の開発者でさえ、常にベストプラクティスに従い、クリーンアップして最適化できるコードを作成するとは限りません。
乱雑で汚いコードの結果
クリーンなコードの原則について説明している、古いがまだ関連性のあるブログ投稿を引用するには、次のようにします。
ソースコードは金融債務に似ています。 あなたが住む家を購入したいとします。ほとんどの人は家の代金を支払うための金銭的余裕がないので、代わりに住宅ローンを借ります。 しかし、住宅ローン自体は持っているのは素晴らしいことではありません。 それは責任です。 あなたは毎月あなたの借金に利子を払わなければなりません…
Web開発でもそうです。 コードには継続的なコストがかかります。 あなたはそれを理解しなければなりません、あなたはそれを維持しなければなりません、あなたはそれを時間をかけて新しい目標に適応させなければなりません。 コードが多ければ多いほど、継続的なコストは大きくなります。 ビジネス目標を達成しながら、ソースコードをできるだけ少なくすることが私たちの最大の関心事です。
しかし、要約にこだわるのはやめましょう。 この記事では、基本的なクリーンコードの原則、コードを整理するために使用されるさまざまな手法、およびコードをより保守しやすく、スケーラブルで、デバッグしやすくする方法について説明します。
高品質のコードは、基本的なコードスタイルから始まり、再利用可能なブロックが多数あるHTML / CSSで大規模なアプリを作成する際のベストプラクティスに拡張します。また、命名規則を使用して、暗黙の可読性を高め、サードパーティのフレームワークとそのベストプラクティスについても説明します。
これを読み終えるまでに、高品質のコードの基本と、HTMLおよびCSSコードの保守と拡張を容易にする方法を十分に理解している必要があります。
コードスタイリングエッセンシャル
優れたHTMLおよびCSSコードの基本から始めましょう：W3Cの有効性、命名規則、ファイル構造など。
初日からの構造に注意してください。
大きなアプリを開発する場合は、ファイル構造に注意する必要があります。 これは、次のようになります。
バリデーターを使用してコードをチェックします。
常にHTMLおよびCSSバリデーターを使用するようにしてください。
悪いコード：
<figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details> p { font: 400 inherit/1.125 serif; }良いコード：
<figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details> p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; } クリーンなコード原則の有効性のために、 <img>タグに代替テキストを使用してください。
この属性は、SEO、検索エンジン、Webクローラー、スクリーンリーダーなどに重要な役割を果たします。
悪いコード：
<img src="demo.jpg">良いコード：
<img src="demo.jpg" alt="This is placeholder of the image">ケバブケース（スピナルケース）を使用してください。
名前には、kebab kebab-case （ spinal-case ）を使用し、 camelCaseまたはunder_scoreは使用しないでください。 under_scoreは、BEMを使用する場合にのみ使用してください。ただし、Bootstrapを使用している場合は、一貫性を保ち、区切り文字として-を使用することをお勧めします。
悪いコード：
<section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>良いコード：
<section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section> kebab kebab-caseは、 camelCaseやunder_scoreよりも読みやすくなっています。
誰でも理解できる意味のある名前を使用し、短くしてください。
クラスの名前は.noun-adjectiveようになります。
コンテンツ固有の名前を書く代わりに、クラスの一般名を使用するようにしてください。 コードを読みやすくします
悪いコード：
<div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>良いコード：
<div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>HTML5でスタイルシートとスクリプトの型属性を記述しないでください。
これらはHTML5では必須ではありませんが、HTML4/XHTMLのW3C標準では必須です。
悪いコード：
<link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>良いコード：
<link rel="stylesheet" href="styles.css"> <script src="app.js"></script>必要に応じて特定のクラスを使用します。
CSSセレクターをより具体的にし、必要な要素を選択します。 必要がなければ、両親は言うまでもありません。 これにより、コードのレンダリングが高速化され、将来的に管理上の障害が取り除かれます。
悪いコード：
section aside h1 span { margin-left: 25%; }良いコード：
.left-offset { margin-left: 25%; }ターゲット要素にクラスを適用すると、HTML内により多くのコードが作成される可能性がありますが、コードのレンダリングが高速になり、管理上の障害がなくなります。
同じブロックに別のスタイルを与える場合は、親要素にクラスを追加します。
同じブロックを使用する必要があるが、スタイルが異なる場合は、HTMLをできるだけ変更しないようにしてください。 親要素に1つのクラスを追加し、CSSでそのクラスの子にすべての新しいスタイルを適用するだけです。
悪いコード：
<article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }良いコード：
<article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }ゼロ値から単位を削除します。
ユニットの追加は不要であり、付加価値はありません。 0px、0em、0％、またはその他のゼロ値の間に違いはありません。 値はまだゼロなので、単位は重要ではありません。
悪いコード：
div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }良いコード：
div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; } hrタグを追加できる場合は、CSSでborder-bottomを記述しないでください。
新しいセレクターを記述してCSSで境界線スタイルを追加する代わりに、 hrタグを使用します。 これにより、コードがよりマークアップベースになり、それが私たちが目指していることです。
悪いコード：
<p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p> .border-bottom { border-bottom: 1px solid #000; }良いコード：
<p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrapA>Bセレクターを使用します。
直接の子にのみルールを適用するA > Bセレクターを使用すると非常に便利です。その場合、そのスタイルを必要としない他のすべての子のスタイルをリセットする必要はありません。 たとえば、ネストされたメニューをコーディングするときに非常に便利です。 サブメニューのスタイルを再定義する必要はありません。
悪いコード：
<ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul> ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }良いコード：
<ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul> ul > li { list-style-type: none; }クリーンなHTMLの書き方
HTMLに移ると、フロントエンドを堅牢で保守しやすいものにすることが優先されます。
可能な限りマークアップベースのフロントエンドを用意するようにしてください。
CSSを書きすぎるのではなく、フロントエンドコードをマークアップベースにします。
これにより、検索エンジンが役立ち、コードが読みやすくなり、検索ランキングとユーザーエクスペリエンスが向上する可能性があります。
悪いコード：
<div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>良いコード：
<main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>HTMLで不要なラッパーを使用しないでください。
HTMLで不要なラッパー要素を使用しないようにしてください。 トントンの<div> >要素と<span>要素を持つことは過去のものです。 物事をきめ細かく線形に保つことで、最小限のコードを実現できます（次のポイントを参照）。
悪いコード：
<section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>良いコード：
<section class=”container”> <p>Unnecessary br tags</p> </section>スタイリングにはアトミッククラスを使用します。
カスタムカラーまたはフォントサイズを使用しないでください（カラーまたはフォントサイズがフレームワークにない場合は、アトミッククラスを追加するだけです）。 アトミッククラスは、スタイリングの単純な単一目的の単位です。 インラインスタイルと同様に、アトミックスタイルは単一のスタイル宣言のみを適用します。
悪いコード：
<h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section> h1 { color: red; } section > h1 { color: blue; }良いコード：
<h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section> .text-red { color: red; } .text-blue { color: blue; }きめ細かいクラスとアトミッククラスを維持し、必要に応じてそれらを使用するようにしてください。 その結果、フロントエンドはよりマークアップベースになります。
セマンティック要素を利用します。
セマンティクスを使用すると、構造が改善され、コードとコンテンツが読みやすくなります。
悪いコード：
<span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>良いコード：
<h1>Welcome</h1> <p>This is unnecessary br tag.</p>HTML5タグを使用します。
新しいタグにより、表現の自由度が高まり、共通の要素が標準化され、ドキュメントの自動処理が向上します。 これがすべての要素の確かなリストです。 多くの開発者が常に多くの<div>と<span>を使用していることを発見しましたが、最初に、どのタグがコンテキストに論理的に適合するかをここで確認してください。
悪いコード：
<div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>良いコード：
<article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>結論： HTML5の新しい要素を学び、使用します。 努力する価値は十分にあります！
CSS：クリーンなコードとプリプロセッサ
CSSに関しては、独創的ではないが生意気なアドバイスから始めないのは難しいです。
CSSプリプロセッサを使用します。
Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。
Sassで使用できる構文は2つあります。 1つ目はSCSS（Sassy CSS）と呼ばれ、このリファレンス全体で使用されており、CSSの構文を拡張したものです。 インデントされた構文（または単に「Sass」）として知られる2番目以降の構文は、CSSをより簡潔に記述する方法を提供します。
セレクターをグループ化します。SASSで@extendを使用します。
セレクターをグループ化するか、SASSで@extendを使用することで、コードをDRYに保つことができます（繰り返さないでください）。
悪いコード：
p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }良いコード：
.font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }CSSではピクセルの代わりにレム単位を使用してください。
サイズと間隔にはREMを使用します。たとえば、ルート<html>要素のfont-sizeに基づいて作成するフォントサイズなどです。 また、ルートフォントサイズを変更することで（たとえば、特定のメディアクエリ/画面サイズで）プロジェクト全体をすばやくスケーリングできます。
レスポンシブビューのコードを少なくします。
悪いコード：
p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }良いコード：
html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }CSSで高さや幅を固定しないようにしてください。
CSSで高さや幅を固定しないようにしてください。 高さは内部コンテンツ+パディングを使用して生成でき、幅はグリッドシステムで定義できます（必要に応じてネストされたグリッドを使用します）。
悪いコード：
<footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer> #footer { height: 130px; }良いコード：
<footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer> #footer { padding-top: 23px; padding-bottom: 47px; }SCSSでは必ず親アイテムを1回だけ使用してください。
CSSプリプロセッサを使用していて、任意のセクションのスタイルを作成する場合は、CSSで親アイテムを1回だけ使用し、すべての子要素とメディアクエリをその括弧内に含めるようにしてください。 これにより、将来変更を加えるときに、メインの親要素を1か所で簡単に見つけて変更できるようになります。
悪いコード：
.section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }良いコード：
.section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }CSSルールを作成する前に、どの要素が影響を受けるかを考えてください。
CSSルールを作成する前に、影響を受ける要素を常に検討してください。 変更が一般的でない場合は、特定の要素のみに影響を与え、他には何も影響を与えないようにルールを記述します。
悪いコード：
/* Commonly used class */ .title { color: #008000; }良いコード：
/* Specify it not to affect other titles */ .section-blog .title { color: #008000; }新しいものを作成する前に、既存のCSSルールと変数を探してみてください。
カスタムCSSとフレームワークの両方で、目的のスタイルに適合する既存のルールを常に探します。 適切なものがない場合にのみ、新しいものを作成してください。
これは、大きなアプリを操作するときに特に重要です。
悪いコード：
.jumbotron { margin-bottom: 20px; }良いコード：
// change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }特定のルールを使用します。
背景に1つのプロパティがある場合はそのプロパティを指定しますが、異なる背景プロパティがある場合は1つの宣言を与えることができます。
悪いコード：
.selector { background: #fff; }良いコード：
.selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }省略形のプロパティと値を使用します。
より多くの省略形のプロパティと値を使用するために最善を尽くします。 省略形のプロパティを使用すると、簡潔で、多くの場合、はるかに読みやすいスタイルシートを記述して、貴重な時間とエネルギーを節約できます。
悪いコード：
img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }良いコード：
img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; } 行の高さには、 pxの代わりにemを使用します。
emとpxの単位を使用すると、デザインに柔軟性が加わり、固定サイズにとらわれることなく要素を上下に拡大縮小できるようになります。 この柔軟性を利用して、開発中のデザインの調整を容易にし、応答性を高め、ブラウザーユーザーがサイトの全体的な規模を制御して読みやすくすることができます。
悪いコード：
p { font-size: 12px; line-height: 24px; }良いコード：
p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }可能な限りBootstrapクラスを使用します。
このルールは一般にUIフレームワークに適用できますが、世界で最も人気のあるフロントエンドコンポーネントライブラリであるBootstrapを例として使用しています。
Bootstrapを使用すると、多くの準備が整ったクラスを使用できるため、作業が簡単になります。 より多くのHTMLベースのマークアップを作成するために、可能な限りBootstrapクラスを使用するようにしてください。
悪いコード：
<section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section> .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...良いコード：
<section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>フレームワークを適切にカスタマイズします。
Bootstrapはvariables.scssファイルに依存しています。これにより、コードを1行も記述せずに、フロントエンドを簡単に構成およびカスタマイズできます。 それ以外の場合、すべてのカスタマイズを自分で手動で作成する場合は、フレームワークをまったく使用しない方がよいでしょう。
一部の開発者は、variables.scssの変更を避け、Bootstrapを新しいバージョンにアップグレードするのにそれほど手間をかけずにできると考えていますが、面倒な作業になる可能性があります。 マイナーな更新でも、開発者は変更ログを読み、すべてのマークアップとCSSを確認し、手動で新しいバージョンに移行する必要があります。
悪いコード：
navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }良いコード：
$navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default; .container幅を上書きしないでください。
.containerの幅を上書きしないようにしてください。 代わりにグリッドシステムを使用するか、 _variables.scssでコンテナの幅を変更してみてください。 幅を狭くする必要がある場合は、widthの代わりにmax-widthを使用してください。 その場合、Bootstrapの.containerは、レスポンシブビューでは変更されません。
悪いコード：
.container { @media (min-width: $screen-lg-min) { width: 1300px; } }良いコード：
// change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }Bootstrap 4クラスを使用し、CSSの記述を減らします。
ベータ版ですが、Bootstrap4の使用を開始します。 これには、レイアウトをより高速に作成するのに役立つ多くの新しいクラス、特にFlexboxとスペーサーが含まれています。
悪いコード：
<div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }良いコード：
<ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>これで、要素にクラスを割り当てて、すべての境界線または一部の境界線を削除できます。
悪いコード：
<div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div> border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }良いコード：
<div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div> .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } } .col-md-Xと.col-lg-X値が同じである場合は、 .col-sm-Xを使用します。
.col-sm-X値が同じである場合は、 .col-md-Xと.col-lg-Xを記述しないでください。たとえば、 .col-lg-10を記述する必要はありません.col-md-10 、自動的に.col-lg-10が含まれます。
悪いコード：
<ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>良いコード：
<ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul> .col-xs-12は使用しないでください。
.col-xs-Xが割り当てられていない場合、デフォルトでは.col-xs-12 .col-xs-12は使用しないでください。
悪いコード：
<section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>良いコード：
<section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section> reset.cssを使用しないでください; 代わりにnormalize.cssを使用してください。
Bootstrapを使用している場合は、 normalize.cssがすでに含まれているため、2回含める必要はありません。
ベストプラクティスではない場合でも、ガイドラインに従ってください。
一貫性を保つために、最初に使用したルールとガイドライン（名前、コードスタイル、ファイル構造など）に常に従うことをお勧めします。
まとめ
何か役立つものを取り上げていただき、ベストプラクティスを使用して最小限のHTMLおよびCSSコードを作成することについてもっと考えていただければ幸いです。
大企業の場合、コードが乱雑な場合、大きなアプリケーションを維持することは非常に困難です。 そしてもちろん、大企業は質の良いものにお金を払うことができます。 クリーンなコーディングの原則に従えば、良い仕事に着手する可能性が高まります。 フリーランスの側面を持ち出すことも価値があります。複数のプロジェクトとクライアントをジャグリングする専門家は、他の開発者にすぐに渡すことができるクリーンなコードを提供する必要があります。
Gulp / Gruntタスク、Linters、エディタープラグイン、コードを生成するツール、あなたの代わりにコードを書くAIツールなどを使用して、コーディングプロセスを自動化する方法について説明する予定なので、今後の投稿でより高度なトピックに拡大したいと考えています。関連トピック。
これが面白くて有益な読み物であったことを願っています。 コーディングの努力を頑張ってください。
Toptal Engineeringブログでさらに読む：
- CSSでSVGアニメーションにアプローチする方法