HTMLで直接スタイリングを行うべきでない理由を説明する

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

私は最近、 このサイトに従ってhtmlから非難されていることに気付きました。 スタックオーバーフローに関するこの回答から、マーキーの置き換えはCSSから行われます。 変更の説明は、htmlはドキュメントの構造に関するもので、レイアウトやアニメーション、スタイリングなどはCSSから行うべきです。

これは私に考えさせました:

htmlタグのstyle属性を設定することと、CSSとHTMLの結合についての学生の理解を高めるのに役立つCSSを使用することの違いを明示的に教えてくれるでしょうか?

それを絞り込むために、私は明示的に教えることがどのように学生が自分のウェブページをスタイルするのをより簡単にするかの例または説明を探しています 。 好ましくは説明。

「明示的に教える」とは、実際には「.CSSを使ってスタイリングする」というタイトルのレッスンに似ています。

それが必要な場合のコンテキスト

HTML、JavaScript(非常に基本的)、JSP、SQLの基本的なWebデザインを学びます。 彼らは1年間これらを学び、年末にはウェブサイトを持っているべきです(彼らはグレードを受け取ります)。 私は、CSSに関する完全な教訓が最終的に見栄えの良いウェブサイトにつながるかどうか疑問に思っています。

5 Comments
3 Puppy 07/30/2017
ここでの中核的な問題は、スタイリングをHTMLで直接行うべきではなく、CSSを使うことがより良いことを前提としていることです。 それらの事のどちらも真実ではありません。
ItamarG3 07/31/2017
@Puppyよく、質問の一部は私がそれを個別に教えなければならないかどうかです。 私がしなければ、彼らはスタイルシートを使用しません。 しかし、どこのウェブサイトでも実際にHTMLでCSSをすべてハードコードすると思いますか? Every divstyle属性のコードが含まれてstyleますか?
1 David Spence 07/31/2017
このサイトは、cssを別に保つ力を示しています。 csszengarden.com - 同じ構造、異なるCSSスタイルシート。
ItamarG3 07/31/2017
素晴らしい@DavidSpence。 私は間違いなくそれを使用します
1 no comprende 07/31/2017
あなたが何をするにしても、 Regexを使ってHTMLを解析することについては、この投稿を表示しないでください。 彼らに悪夢を与えることができました!

12 Answers


richard 07/30/2017.

私はいくつかのスタイルシートを作成し、生徒にそれらをHTMLに適用させるというアイデアが気に入っています。 彼らは別のスタイルシートを持つ力を見ることができます。

次に、スタイルシートの編集を開始して、1つの小さな変更の力がすべての見出しや段落などを変更できることを確認します。

私は過去にも、一番下に一連のボタンを持つHTMLファイルを書きました。 これらのボタンは、別のCSSファイルを読み込むようにトリガします。 非常にシンプルなJavaScriptでした。

彼らは別々に保たなければならない

スタイルとコンテンツを別々に保つことは、W3や他の多くの人々によって推奨されています。 それは懸念と単一の責任の分離を実装します。 どちらもソフトウェア設計における非常に重要なパターンです。

あなたは、CSSファイルを分けるための教訓を尽くすべきでしょうか。

はい。 これらを分けておくことが重要なのであれば、それを分けておくよう教えるべきです。 時間を節約するために、HTMLと混ぜて教えないようにしてください(これは、教えてもらう必要がないので、2回の節約になります)。


私は(クラスではなく)1人または2人でこれを行っただけです。

5 comments
ItamarG3 07/30/2017
その2番目の段落は特に便利です。 しかし、インラインhtml style属性の代わりにCSSスタイルシートを書く方法とその理由を教えるための教訓を本当に捧げるべきかどうかは答えません。
richard 07/30/2017
Ifに部分的な答えを追加し、それに授業をする理由を追加しました。
1 Buffy 07/30/2017
私はun-teachingが特に皆の時間の無駄な使用であることに同意します。 悪い習慣が構築され、強化される前に誤解を捉えることが最善です。
1 richard 07/30/2017
@tim、これは単なる負荷のoptimisationです。 概念はまだ分かれているべきです。 しかし、Googleは同じファイルに置くと言っている。 彼らはあなたが別々に各ビットをスタイルする必要があると言っているわけではありません。 彼らは、CSSファイルにあるものをとり、htmlの<style>セクションに追加すると言っています。
1 Darren 07/31/2017
学生にコードに影響を与えるさまざまなスタイルシートを与える代わりに、私は反対のアプローチを試みるでしょう。 HTMLでインラインスタイルを教えた後、スタイルのためにCSSドキュメントに依存するページを作成し、インラインHTMLを使用して学んだのと同じテクニックを使用して独自のスタイルシートを作成するように依頼します。それらを1か所にまとめる)。 そして、クラスの皆さんは、共通のテスト科目(あなたが提供した科目)で自分のスタイルシートを比較し、その可能性を確認することができます。

Buffy 07/30/2017.

シンプルで特別なページで、今後変更されることはなく、ある種のデバイスでしか見られないページを作成したい場合は、スタイリングをHTMLに直接組み立ててください。 1つのデバイスで1回だけ実行されて回答を得るプログラムを書くと同じですが、その後はプログラムが廃止されます。 したがって、慎重にコーディングする必要はありません。 「クイックと汚れ」はそのようなもののために働きます。

However 、さまざまな画面サイズのデバイス、つまりカラーモデルでも、状況は変わり、Webページはデバイス上で表示されます。 将来的にはまだ存在していないデバイスで見られるかもしれません。

したがって、重要で永続的で、今後も維持管理が必要なサイトを構築する場合は、CSSを使用してください。 おそらく、重要なCプログラムをすべてmainに書くのではなく、少なくとも同じでなければならないものを取り除いて再利用することになります。 単純なCプログラミングでは、このための関数を取り除きます。 htmlではスタイリングを取り除きます。 より深いレベルでは、サーバー側もデータの多くを除外します。これにより、同じものとみなされるものが同じ状態になり、他のレベルとは独立してデザインの1つのレベルを変更できます。

これはまったく同じことではありませんが、Googleのトップページの根底にあるコードを見てください。 私は彼らがそれをまとめて維持するために何を使うのか分からないが、単なるテキストエディタであるとは思っていない。 フロントページは 、レイアウトが非常に単純ですが、頻繁に変更されることに注意してください

Note to the Instructor学生の作業を成績評価する準備ができたら、さまざまなデバイスでさまざまな画面解像度で見ることができます。 ただし、デバイスごとのCSSを提供するようにすることはお勧めしません。

その点については、デスクトップと携帯電話のStackExchangeページの一部を表示します。 そして、ショッカーのために、いくつかのページのソースとスタイルシートの両方を見てください。

2 comments
1 Luke Sawczak 07/31/2017
関数との比較は良いです。 問題の罪がソースHTMLにスタイル属性を直接供給していると私は推測します。 もしそうなら、方法の本体を取ってメソッドを呼び出す場所に貼り付けることと比べることができます。 極端な生産性に反する。
no comprende 08/01/2017
実際のショッカーには、マイクロソフトのページとMoodleのソースとスタイルシートを見てください! それらは数百行になることがあります。 HTMLの元のコンセプトは、「まだ存在しない」デバイス上で動作するということでした。 そして、現在、非常に多くの画面サイズがあり、変数である可能性があります。

AnoE 07/30/2017.

他のCSSファイルを置き換えるだけで、CSSだけでできることを本当に理解できるようにするには、それらをCSS Zen Gardenに持って行きましょう。 各ページのHTMLがまったく同じonly 、.cssファイルonlyが置き換えられると、あなたはばかげた野生のページを取得します。 静かな小さな無限から3Dスクロールキューブまで...

次に、HTMLを作成するために必要なスキルセットと、特にCSSのような極端なCSSのスキルセットが大きく異なり、HTMLが情報キャリアとしてのみ機能することを説明します。

もう一つの利点は、スクリーンリーダー(盲目用)をインストールすることです。 無料で使用すること限られていますが、声を出しても同じHTMLがどのように見えるかを示すことができます。

また、視覚障害者のためのツールは、例えば、HTMLからリンクテキストなどを抽出することができます。これは、構造が整っていれば、キーボードだけでページをナビゲートすることも可能です。たとえ視力が良ければ、とても傾いている。

最後に、コンテンツとスタイルの分離が良好なページでは、ポータブルデバイスで作業できる可能性が高いことを指摘します。これは、レスポンシブデザインであり、コンテンツは必要に応じて任意の解像度に自由に流れることができます。


thehayro 07/30/2017.

それを絞り込むために、私は明示的に教えることがどのように学生が自分のウェブページをスタイルするのをより簡単にするかの例または説明を探しています。 好ましくは説明。

リチャードが言うように、生徒はスタイルの簡単な編集がどのようにすべての要素を変更できるかを見ることができます。

例として、あなたは生徒にhtmlからのスタイルの分離のメリットを感じさせることができます。 つまり、HTMLを使っていくつかの要素をスタイルする必要がある(例えば、要素の背景を色づける)練習を彼らに与えます。 次に、各要素を別の色に変更させます。 レッスンでは、htmlからスタイルを分離すると、この作業がはるかに時間を節約できることを理解できるようになります。 次に、CSSの1行を変更する方法をデモンストレーションすると、すべての要素の背景色が変更されます。

4 comments
thesecretmaster♦ 07/30/2017
こんにちは! コンピュータ科学教育者へようこそ!
Puppy 07/30/2017
別の方法としては、正気のようなコードでHTMLを生成することもできます。その場合は、別のスタイルシートを使わずにすべての要素の色を変更するのは簡単です。
1 thehayro 07/30/2017
確かに。 これは、Webページを表示する必要がある要件(モバイル/デスクトップ)に依存します。 しかし、私が理解する限り、HTMLとCSSの分離が必要な理由とその理由を説明する方法が問題でした。
no comprende 08/01/2017
私がCSSを学んだとき、私は自分自身に大きめのチェス盤を作成する作業と、ヘッダーとフッターを持つ正規の3列のページレイアウトを作成しました。

SpiritBH 07/31/2017.

どういう形でコードを分離するのはなぜですか?

ほぼすべてのプログラミング/スクリプト言語で、分離と委任が行われています。 これは、すべてのコードをより簡単に追跡できるようにするためであり、問​​題をより簡単に特定できるようにするためです(プログラマが間違いがないため不可避的に発生します)

だから私は、CSSに関する特別なレッスンは良いアイデアだと考えています。なぜなら、それは彼らが何が責任あるのかを理解するのに役立つからです。 それは、ソースを見てもすべてのHTMLが正しいが、すべてのメイクが混乱していて、CSSを見なければならないことを理解するのに役立ちます。

さらに、CSSは大きくて柔軟性があり、物事の周りにすばらしい境界線を置くだけでなく、多くのことを行うことができます。 どのようなことができるのか、どのくらい複雑になるのかをクラスに示すために、HTMLとCSSをあまりにも深く混ぜるのは賢明ではありません。

結局、HTML(またはその問題のコード)からCSSを分離することは開発の手助けとなります。 創造性についてのより多くの、より容易な制御を有する開発者についての創造性に関する(より良い)機能に関するものではない。

そのメモの上に、あなたがクラスのそれぞれの作業をチェックするようにしたい場合は、チームで作業するときにきれいな委任コードを持つことが重要であることがわかります。

1 comments
ItamarG3 07/31/2017
非常に興味深い点をいくつか挙げます。 ありがとう! コンピュータサイエンス教育者へようこそ

gabe3886 07/31/2017.

DRYコード(自分自身を繰り返さないでください)を導入することは、少し違った見方です。

CSSを使ってスタイリングを行うことで、HTML要素にクラスを追加するだけで、スタイリングを保持することができます。 手動ですべてを追加する必要があった場合は、1つの部分を変更する必要がある場合は、さらに多くの部分を変更する必要があります。

W3 Schoolsのイラストレーションのアイデアを盗むには、段落の背景色を変えたい場合は、次のようにします。

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

しかし、もし私が2,4,3,1だから色をつけておくように注文を変更したいのであれば、各タグに組み込まれているすべてのスタイルを変更しなければなりません。 複数のページにまたがっている場合は、作業負荷が大きくなる可能性があります。

私がCSSでやったのであれば、私は以下を行うことができます:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

今は内容が何であるか気にすることはなく、私は好きなものを注文することができ、スタイリングはまだ機能します。 たくさんの努力が変わった。 順序を無視して、わかりやすい色に変更して読みやすくする場合は、CSSの値を一度変更して、一致する各DOM項目に適用します。

それを超えて(CSSはヘッドタグのHTMLに埋め込むことができる)、ファイルに分割してそれを含めると、私は自分のCSSをいろいろなファイルに繰り返す必要はありません。私が持っているページ。 私はヘッダーにCSSファイルを含め、スタイルが有効になります。 色を変更したり、スタイルを追加したりする必要がある場合は、インラインスタイルを使用しない場合と同じように複製する必要がないという同じ利点があります。

分割された責任から離れた別のファイルを持つことによるもう1つの利点は、パフォーマンスです。 ブラウザはファイルをキャッシュに入れているので、サイトのCSSファイルを1回(理想的には縮小した)ダウンロードしてから再適用する必要がある場合は、他のページにダウンロードすることは少なくなります。 パフォーマンスは、特にモバイルブラウジングの増加に伴い、常に人々のための検討事項であるべきです。 ウェブページに多数のCSSがある場合、ソースは自然に大きくなります。 これは、ダウンロードや使用可能になるまでに時間がかかり、人々を待たせる可能性があります。


ncmathsadist 08/01/2017.

ウェブページには、構造、外見、行動という3つの層があることを教えています。 構造は、整形式のHTML5マークアップで作成されたDOMによって決まります。 HTMLについて学ぶとすぐにドキュメントツリーの描画を開始するので、ページ上の要素が互いにどのように関連しているかを理解できます。

外観はCSSによって決定され、CSSはDOMにアクセスしてページを書式設定し、スタイルを設定します。 これは別のファイルに保存され、関連するページのグループによって共有されます。 HTMLはidclassを使って特別な状況を処理します。 これらの属性を持つアイテムのスタイルはCSSファイル内のone placeに作成されるため、これらを使用するとページを簡単に維持できます。

3番目のレイヤーはビヘイビアで、JavaScriptファイルに表示されます。 イベントハンドリングコードから関数を呼び出すためにJavaScriptをページに表示する必要never 。 これもJSファイルに添付することができます。 生徒がloadイベントと早期loadについて知っていることを確認し、ページ要素が存在するまでコードの呼び出しを遅らせることができます。

Nodeをインストールすると、コマンドラインでJSコードのテストを実行し、作成した関数のテストスイートを開発できます。

3つのレイヤーを分離することで、物事をきれいに保ち、コードの再利用を最大限にします。


user1639154 07/31/2017.

これは多くの答えがスタイリングの継承のポイントに対処していないと思われるので、これも教えてください。 基本ルールは最後に読み込まれたものが適用されます。

最初にロードするのは通常、ドキュメントの先頭にある外部のシートです。 文書の先頭にリンクされているスタイルシートは、HTML本体のインラインに配置されたスタイルに乗ってオーバーライドされ、DOMエレメントに直接配置されたスタイルによってオーバーライドされます。 !importantタグを使ってこの振る舞いを変更することもできます。

ほとんどの人は、自分のファイルをすべて自分のファイルに入れます。これは、保守が簡単で、更新/変更したときに多くの作業を必要としないからです。

編集:ちょっとだけ明確にするために、1つのインラインがテキストをアンダーラインにするスタイルを追加した場合、つまり、外部シートのクラスにない場合、互いに衝突する/オーバーライドするクラスで一致する特定のスタイルだけです。たとえば、追加のスタイリングを追加するだけです。 クラスは互いに直接置き換えられるのではなく、互いにマージされます。

5 comments
1 ItamarG3 07/31/2017
ワオ。 コンピュータ科学教育者へようこそ。 これは本当に私が考えなかったものです。 それを示すいくつかの例や説明を追加できるなら、私はそれが大好きです。 (私can自分で書くcanますが、私はあなたが考えることができるものを見ることにもっと興味があります)。 これは本当に面白い答えです:)
1 ItamarG3 07/31/2017
無関係: ツアーに参加してみませんか? 面白いと思うよ。
user1639154 07/31/2017
私はそれが少し間違っている、その外部のスタイルシートを最初にし、次に文書のスタイルをし、要素上に、私の脳は、月曜日の朝に決して100%ではありません。 :)
ItamarG3 07/31/2017
許して忘れる;)。 あなたはあなたの答えを編集することができます。 あなたの答えの直下にeditボタン\リンクがあります。 あなたがそれをしている間に、あなたの答えが取り組んでいることを実証するための例を追加しますか? それは本当にもっと良い答えになります:D
user1639154 07/31/2017
残念ながら今は時間がありません。 私はCSSの重要な側面であるため、CSSの継承について言及したかっただけです。

rackandboneman 08/03/2017.

結果がsame document 2つの全く異なるビューであるプロジェクトをsame document 。例えば、大きなモニターでは素晴らしいバージョン、iPhoneでは素晴らしい外観などがあります。

静的なWebページではなく、コンピュータで生成された更新可能なドキュメントを使用すると、スタイル情報をドキュメントジェネレータに埋め込むと視覚的に複雑になります。スタイルを混乱させる唯一のオプションは、あなたが意図したとおりのstylesheetか、関わりのあるすべての面倒を見てください。 さらに優れています:ルームの別々のコーナーにtwoグループを割り当てて、ドキュメント生成とスタイルシートパートを行い、2つの間で仕様がどのように伝達されるかを調整します。

4 comments
ItamarG3 08/03/2017
これが信じられない。 ワオ。
rackandboneman 08/03/2017
さて、それを信用できるようにしてください。
ItamarG3 08/03/2017
それは私が(学校のもの)を開示することができない状況での問題を解決するので信じられないが、それはexactlyに質問exactly対処していない...
1 rackandboneman 08/03/2017
ああ、私は教師ではなくIT専門家としての議論に干渉しています。私が記述したことは、あなたが教えたい理論のように実践されている理由です。

Chris M. 08/02/2017.

ここに良い答えがたくさんあります。 私がまだ見ていないことは、コンテンツとデザインが別々の人やチームによって作成されることが多いため、それぞれ独自のツールと言語で定義することで、必要な別々のワークフローが可能になるということです。

4 comments
ItamarG3 08/02/2017
ワオ。 私はそれを考えなかった。 CSSスタイルシートの使い方に関する別の教訓でこれをどのように説明することができるのかちょっと考えてみましょうか?
Chris M. 08/02/2017
私は類推を使用します。 自動車技術者は車色を選択しません。 脚本家は一般的に衣装デザインをしません。
ItamarG3 08/02/2017
そうですか。 答えを編集することで、あなたの答えにそのような類推を含めるべきでしょう。
1 Buffy 08/03/2017
実際それはそれより悪いです。 重要なウェブサイトを持つ大企業の中には、コンテンツチームとレイアウトチームの両方の上に座っている標準チームがあります。 レイアウトが標準から1ピクセルずれている場合は、オーバーライドします。 1ピクセル。

thesecretmaster 08/03/2017.

インラインスタイルが悪い重要な理由は、コードの可読性、単純で簡単です。 この場合、例はあなたのポイントを証明するのに十分でなければなりません:

  
The Title
This is a super great article

に比べ:

  
The Title
This is a super great article

この例に加えて、クラスとIDを使用しないと、DOMをJavaScriptを使用して操作するのがずっと難しくなります。擬似要素と、 :nth-child():first-childといった本当に素晴らしいCSSセレクタを使用することは不可能になります:first-child 、いくつか:first-childます。


Puppy 07/31/2017.

スタイリングはHTMLで直接行う必要があります。

主な問題は、スタイリングがHTML構造から離れたリモートでさえないということです。 物理的に別のファイルにスタイルを書き込んでも、これは変わりません。 その良い例はモバイルデバイスのサポートです。 理論的には、モバイルCSSファイルを作成することができます。 しかし実際には、モバイルデバイスで優れたエクスペリエンスを生み出すためには、完全に別個のUIデザインが必要であり、これをサポートする別のHTML構造と、別のスタイルセットを必要とするでしょう。 「ボタンは同じだが少し小さくする」は、最小のものにしか作用しない。

正しいUIを作成するには、必要なスタイルをサポートするHTML構造を生成する必要があります。 2人は実際に密接に結びついているので、それらをコロケーションさせるだけで、物事を理解しやすくすることができます。

さらに、コードを使用してHTMLを生成している可能性があるため、コード生成プログラムはスタイルを一日中吐き出すことができるため、重複したスタイルでHTMLを生成することに問題はありません。

生のCSSを持つことは、スタイルが完全にランダムでグローバルな範囲であり、再利用するのが難しいため、非常に問題があります。 誰もそれを使わなかったという希望の下でクラス名を作る。 その要素の内部に独自のクラスをネストしてこの問題を解決しようとすると、これらのクラスは正しいDOM構造にないため、他の場所で再利用することはできません。 次に、あなたのページのいくつかの完全に別々の部分のいくつかのランダムな男があなたに通知せずにあなたのクラスを使用し、あなたのスタイルを変更することでそれを壊したことが分かりました。 また、タイプチェック、IDEサポートなどを取得することもできます。パラメータ化されたクラスを作成することや、置き換えをグローバルに適用することも難しいです。例えば、 display: flex with display: flexdisplay: -webkit-flex for iOS。

スタイルを扱う正しい方法は、他のコードと同様に扱うことです。いくつかの関数でそれらをカプセル化します。

5 comments
1 thesecretmaster♦ 07/31/2017
こんにちはパピー、 コンピュータ科学教育者にようこそ! 他の子犬と出会いたいのであれば、 チャットで 、ブルドッグであるバフィーにこんにちはと言うことができます。 これは興味深い答えです。ここにあなたの視点を共有してくれてありがとう!
2 richard 07/31/2017
私はあなたが言うすべてに同意しませんが。 私はあなたのポイントを見ます。 特に最後の行(私はあなたがこれを拡張すべきだと思う)。 どのようにそれを行うべきだと思うかを教えてください。 100%同意しなくても、何かを学ぶことができます。
no comprende 08/01/2017
あなたの答えは私が質問した時を思い起こさせ、誰かが「ラテン系のミサを読んだなら」と言った。 物事を行うための多くの「正しい」方法があり、あなたの視点から、生成されたHTMLを使って、実際には違いはありません。 しかし、ほとんどのプログラマーがコンパイラの書き方を習得していないように、ほとんどのインストラクターは生成されたHTMLを教えていません。 HTMLファイルの保守を容易にするために追加するレイヤーは、スローアウェイHTMLには余計です。 私も物事を生みたいのですが、私は膨大な少数派です。 たぶんドメイン固有言語について話すことがありますか?
Puppy 08/01/2017
生成されたHTMLを教えていないインストラクターは有用なHTMLを教えていません。
ItamarG3 08/02/2017
@Puppyそれはそうですか?

Related questions

Hot questions

Language

Popular Tags