CSS開発者が行うことと必要な理由

公開: 2022-03-11

CSS開発者はWebプロフェッショナルであり、その主な責任は、洗練されたスタイルの製品を訪問者のブラウザーに提供することです。事実上すべてのWebサイトがCSSを使用していますが、CSSは、最新のWeb開発スタックでは「同等」とは見なされないことがよくあります。残念ながら、この誤解により、CSSが当然のことと見なされたり、ある程度見落とされたりする可能性があります。

CSS以外の開発者がCSSを処理できるようにすると、多くの場合、コードにCSSハックやバグが発生し、開発者に不必要なフラストレーションを引き起こす可能性があります。この記事では、すべてのサイトに信頼できるプロのCSS開発者が必要な理由をよりよく理解できるように、仕事の内容をすべての人に理解してもらいたいと思います。

CSS開発者は何をしますか？

基本から始めましょう。 CSSが非常に重要なのはなぜですか。また、CSS開発者は正確に何をすべきでしょうか。

CSSは特定の言語であるため、それ自体で存在することはできません。意味をなすにはHTMLが必要です。したがって、CSS開発者が最初に行うことはHTMLコードを書くことです。

きちんとしたHTMLを書くことは常に重要です

控えめなHTMLドキュメントはエンドユーザーに最初に提供するものであるため、わかりやすく、クリーンで、適切に編成されたHTMLを作成することは大きな責任です。

本番環境に対応したHTMLドキュメントを作成する場合は、Webサイトを最大限に活用するために、ドキュメントの先頭にすべての必須タグとオプションタグを含めるようにしてください。正しいDoctype、言語、メタタグ、ファビコン、読み込みテクニック、SEOの設定について話しています。

あなたのウェブサイトをよりパフォーマンスが高く、よりアクセスしやすくし、そしてあなたの聴衆と検索エンジン、そして他のサービスとツールへのより多くの露出を提供するのを助けることができるすべて。 HTMLドキュメントの本文も肥大化してはなりません。セマンティックHTMLタグをいつ使用するか、必要なHTML属性を追加する方法、および深いネストや分割を回避する方法を知ることは、無視するのではなく、プロジェクトの最初から実装する必要があります。プロジェクトの途中でプロの開発者がベストプラクティスを実行し始めることはありませんが、HTMLなどの一見基本的なことでさえ間違っていることがよくあります。

全体的なデザインによって、さまざまなHTMLコンポーネントをどのように編成するかが決まることがよくあります。 CSS開発者は設計者と緊密に連携し、すべての設計者が同じツールを使用して設計を提供するわけではありません。 Sketch、Photoshop、InVision、またはFigmaに精通し、デザインを「スライス」できることは、CSS開発者にとって必須のスキルです。同時にデザインを適用できるようにコンポーネントを構成する方法を常に念頭に置く必要があります。 BEMやOOCSSなどの適切な命名規則を使用すると、肥大化したHTMLや保守不可能なCSSコードの記述を防ぐことができます。

JavaScriptはどこにでもあります

モーダルやツールチップなど、一部のコンポーネントはインタラクティブである必要があります。多くの場合、JavaScriptを十分に理解する必要があります。「深い」JavaScriptではなく、JavaScriptイベントとDOM処理が必要です。ユーザーのリソースを使い果たしてWebサイトの動作を遅くしたり、さらに悪いことに、クラッシュして完全に応答しなくなったりしたくないため、DOMの処理は難しい場合があります。

JavaScriptの世界は急速に進化しており、新しいフレームワークやツールが日常的に登場しているように見えることもあります。 JavaScriptは非常に人気があるため、最新のベストプラクティスを使用して、エンドユーザーに最も楽しいエクスペリエンスを提供する場合は、ループにとどまることが重要です。

CSS

これはCSSにも当てはまりますが、JavaScriptとほぼ同じペースで進化するわけではないと多くの人が主張します。ただし、CSS変数、CSSグリッド、さらにはFlexboxなどの新機能を習得するには時間がかかります。

次に、ブラウザのサポートがありますが、それは今日でも問題を引き起こす可能性があります。あなたのサイトは、現代のブラウザでは百万ドルのように見えるかもしれませんが、レガシーブラウザではそれほど多くはありません。 FlexboxはIE11でサポートされている可能性がありますが、それでも期待どおりに機能しない可能性があります。これらの問題を回避する方法を知ることは、CSS開発者の仕事の一部です。

ありがたいことに、コミュニティは非常に役に立ち、FlexbugsやGridbugsのようなサイトは多くの時間を節約できます。

CSSツール、テクニック、および原則

信頼できるコードを提供するために、タスクランナーやGrunt、Gulp、webpackなどのバンドラーなどのツールを利用できる場合もあります。コードをトランスパイルするために、linters、minifiers、babel、またはPostCSSを使用してコードをスーパーチャージすることができます。

次に、CSS開発者の日常業務の一部であるさまざまなフォント、タイポグラフィ、画像、アイコン、アイコンフォント、アニメーション、トランジション、およびその他の抽象的な側面を考慮する必要があります。すべての機能には、その特異性、制限、問題、および解決策があります。習得する機能とテクニックが多ければ多いほど、プロジェクトでコンポーネントのスタイルを設定して実装するのが簡単になります。

CSSのプロパティと値はかなりの数あり、すべてを知ることはできません。幸いなことに、私たちのツール、特にコードエディタと開発ツールはそこで私たちを助けてくれます。ただし、z-indexの問題を解決する必要がある場合、ツールでさえ頭痛の種を解決するのに役立ちません。失敗することは学ぶための最良の方法です。

これはCSSを使用する場合に特に当てはまります。その理由は、次のとおりです。

z-indexの問題を解決しようとしたことがない場合は、スタッキングコンテキストについて学ぶことはありません。 Bootstrapクラスをオーバーライドしようとしたことがない場合は、特異性について学ぶことはありません。フロートの問題を修正しようとしたことがない場合は、ボックスモデルについて学ぶことはありません。

解決策が簡単な場合もありますが、質問するだけでは難しい場合があります。他の言語と比較すると、なぜ私のループが機能していないのかを尋ねることはできません。 CSSの問題を解決するには、完全なコンテキストが必要です。これは、多くの場合、多くの人が理解していないものです。カスケードです。

カスケードはCSSの最高の機能であり、あなたに逆らうのではなく、あなたのために機能するはずです。一部の開発者は、CSS-in-JSのようなカスタムアプローチを発明することでそれを回避しています。 CSSをReactのようなカプセル化された環境にパックすると、他の場所で使用できなくなります。これがスケーラブルなプラットフォームに必要なアプローチではないかと思います。カスケードに問題がある場合は、それを受け入れる方法を学び、次にそれを飼いならす方法を学びます。

私がこの記事を準備している間、Max BockはCSSの考え方について書きました、そしてこれはまさにCSS開発者がしなければならないことです。 CSS開発者は、デフォルト値とコンテキストをオーバーライドせずに可能な限り少ないコードを記述しようとしながら、ボックス内で考え、コンテンツの変更を予測し、可能な限り固定数を避けます。

なぜCSS開発者が必要なのですか？

ほとんどのフロントエンドまたはフルスタック開発者でさえ、CSSコードを書くことができます。しかし、HTMLコードを複雑にしたり、必要のないJavaScriptに依存したりせずに、すべてのCSSバグを修正したり設計を実装したりできるわけではありません。

プロのCSS開発者は、コードの最終的な詳細に気を配り、最も複雑なものも含めてレイアウトやコンポーネントの作成を楽しんでおり、すべての問題やバグを解決する方法を知っています。

CSSコーディング標準

コードを書く前に、コードを書くことについていくつかの基本的なルールを用意しておくことをお勧めします。 CSS開発者は、コーディング標準を尊重する必要があります。これは、プロジェクトの保守性とスケーラビリティにとって不可欠です。

プロジェクト全体で使用する命名規則を選択します。早い段階で命名規則を確立することは、開発者がより良く、より組織化されたコードを作成するのに役立ちます。また、HTMLコードだけを読むことで、プロジェクトに関係するすべての人がコンポーネントの構造とコンポーネントと要素の関係を理解するのに役立ちます。

CSSでインデント、セレクタータイプ、省略形のプロパティ、単位を処理する方法を決定します。たとえば、コーディング標準でrem単位の使用が提案されている場合は、ピクセル単位の使用を避けてください。誰もが明確な書き込み/コーディングスタイルを持っていますが、専門家として、あなたはすべての概念を採用でき、さらに重要なことに理解できなければなりません。

CSS設計の実装

デザインをコードに変換する前に、時間をかけてすべてのページ、レイアウト、およびコンポーネントを理解する必要があります。可能であれば、すべてのページを分析し、ページとコンポーネントのリストを作成して、パターンを見つけてください。

より多くのページに存在するコンポーネントに気付いた場合は、その周囲の環境を認識し、スタンドアロンコンポーネントと考えてみてください。カードやリストなどの類似したコンポーネントがある場合は、同じコンポーネントのバリエーションを使用できます。このようにして、HTMLコードを再利用し、CSSコードを少しだけ記述して、変更されたように見せることができます。

タイポグラフィや間隔など、他の領域のパターンを見つけることもお勧めします。これにより、個々のページではなくプロジェクト全体で使用できるヘルパークラスが作成される場合があります。

CSSコードを整理する

CSS開発者は、コードを整理し、すべての人にとって意味のある構造を作成する必要があります。 CSSプロセッサなどのツールを使用する場合、CSS開発者はコンパイルされたコードを生成するプロセスを文書化する必要があります。

必要に応じて、CSS開発者はスタイルガイドを作成できます。スタイルガイドは、新しいページを作成したり、既存のページにアプローチする方法を決定したりするときに参照できます。私のアドバイスは、スタイルガイドをチーム全体でグローバルに利用できるようにすることです。これは、視覚的なコンテキストがある場合に決定を下す方がはるかに簡単だからです。スタイルガイドには、カラーパレット、タイポグラフィルール、コーディング標準、さらには静的ページを含めることができます。予算とあなたの想像力を除いて、制限はありません。

本番環境でのCSSコード

CSSコードを書くことは、クロスブラウザーの問題、バグ、アニメーション、トランジション、応答性、および印刷スタイルを処理することを意味します。これらの機能の多くは、万能の開発者が簡単に管理することはできません。私はここまで進んで、これらは全体的に最も嫌いなCSSタスクであり、すべての開発者がそれらの処理方法を知っているわけではないと言います。一方、専門のCSS開発者は、すべてのバグ、ブラウザー、および環境を念頭に置いてコードを作成する方法を知っています（または少なくとも知っている必要があります）。

最新のアプローチを使用することも1つの方法ですが、古いブラウザーをサポートし、モーションの削減などのユーザーの設定を尊重することも無視してはなりません。

CSS開発者はHTMLおよびJavaScriptコードも記述します。つまり、アセットの配信はCSS開発者の責任です。 CSS開発者は、フォントの読み込み、重要なCSSの抽出、遅延および非同期JavaScript読み込みの使用、レスポンシブ画像の提供を担当する必要があります。

これらの手法はどれも実装が簡単ではなく、特効薬もありません。

CSS開発者があなたのためにできること

上記のすべてが、専用のCSS開発者が必要な理由を説明しています。ここに彼らが扱う重要なもののほんの一部があります：

すべてのプロジェクトメンバーがコーディング標準に準拠していることを確認します
設計を実装する
コードを整理する
コードを書く
バグを修正する
新しいテクニックについて学ぶ
コードを改善する

まとめ

あまりにも長い間、CSS開発者の役割の存在と重要性の問題は、特に建設的で意味のある議論を奨励しませんでした。 CSS開発者が適切な役割であることに同意し、認めてみましょう。

彼の記事TheGreatDivideで、Chris Coyierは技術リーダーの一部を引用しています。彼らのほとんどは、分割が必要であり、最新のJavaScriptフレームワークの知識を必要としないCSSベースの役割が必要であることに同意しています。「CSSだけ」以上のことを知っていると役に立ちますが、その役割は存在する必要があり、JavaScriptベースの役割と同等に受け入れられる必要があります。

結局のところ、あなたはあなたの製品を完璧に磨くことができる専門の専門家の手に委ねたいですか、それともあなたは十分に落ち着きますか？

Toptal Engineeringブログでさらに読む：

CSSでSVGアニメーションにアプローチする方法