質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

昔のweb標準と現在のcss設計について

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 4
  • VIEW 604

tarouM

score 13

昔のweb標準と言われる頃のwebコーディングは「文章の構造とデザインを分離」が主流で、
「htmlに余計なクラス名をかかない。デザイナーは(できるだけ)cssで見た目を整える。
といった感じですが、
現在はflocss等のcss設計が主流で
cssの編集だけでなくhtmlにクラスを増やしていくのが主流となっています。

これは「いつから」「なにがきっかけで」変わっていったのでしょうか?

ご存知の方がいらっしゃったら教えていただけると幸いです。

追記

言葉足らずですいません。
今回は文章構造とcssの分離的意味合い質問です。
もっと乱暴に説明するなら、システムとデザイナーの作業分離です。
(一昔の現場は…的な概念的話になります)

flocssは構文の意味を守りつつcss設計ができるのは理解できているのですが、
flocssはcssのカスケードを極力禁止しているため(プロジェクトはできる等例外はありますが好ましくない)、htmlに都度都度クラス名を足さないといけなくなります。

その際に、システム出力されるhtmlの場合都度システムに修正依頼をかけないといけなくなります。
自分でhtmlコードも管理できる場合なら気にならなかったのですが、flocssを守るとなるとhtmlを編集する回数が増えてしまい、昔の「分離」的考えならcssの上書きで
対処できたな…いつからこの考えが変わっていったんだろう?
と思ったのが質問の経緯です。

明確な答えはなく、時代の流れ的になんとなく……なのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • KojiDoi

    2019/04/10 23:46

    そもそも「文章の構造とデザインを分離」と「flocss等のcss設計」の間に別に矛盾はないので、質問が成立しないように思います。

    キャンセル

  • 退会済みユーザー

    2019/04/10 23:57

    複数のユーザーから「プログラミングに関係のない質問」という意見がありました
    teratailでは、プログラミングに関して困っていることがないと思われる質問を推奨していません。
    「質問を編集する」ボタンから編集を行い、具体的に困っている理由や解決したいことを明確に記入していただくと、回答が得られやすくなります。

回答 2

+2

構造とデザインの分離

今回は文章構造とcssの分離的意味合い質問です。
もっと乱暴に説明するなら、システムとデザイナーの作業分離です。

1行目と2行目は別の問題です。

カスケーディングと詳細度

その際に、システム出力されるhtmlの場合都度システムに修正依頼をかけないといけなくなります。
自分でhtmlコードも管理できる場合なら気にならなかったのですが、flocssを守るとなるとhtmlを編集する回数が増えてしまい、昔の「分離」的考えならcssの上書きで
対処できたな…いつからこの考えが変わっていったんだろう?

FLOCSSがカスケーディングと詳細度計算させることを廃止する方向で設計されている理由は作者の@hilokiさんが説明しています。
https://github.com/hiloki/flocss

Re: tarouM さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/12 11:49

    > 今回は文章構造とcssの分離的意味合い質問です。
    > もっと乱暴に説明するなら、システムとデザイナーの作業分離です。
    >
    > 1行目と2行目は別の問題です。

    うまく説明できてなくてすいません。
    別問題なのはなんとなくわかるのですが、過去得た知識の中に、

    文章構造とcssの分離

    デザインをするのはcssの役目

    ならデザインを追加するためにhtmlを触る必要がないので
    htmlはシステムが触って、cssはデザイナーが触ればいい

    的な話につながり上記の様にかきました。


    > FLOCSSがカスケーディングと詳細度計算させることを廃止する方向で設計されている理由

    これについても知っていたのですが、
    破たんしようが、デザインのためにhtmlに余計なクラスをつけないという考えに拘りすぎていたため
    理解がうまくできないんだと、下記の回答も含め改めて気が付きました。
    ありがとうございます。

    キャンセル

  • 2019/04/12 11:50 編集

    ※2重投稿のわからないため空のコメント

    キャンセル

checkベストアンサー

+1

「いつから」「なにがきっかけで」変わっていったのでしょうか?

Bootstrap等の「フレームワーク」が登場し、単純に利用者が増えたので、「主流」そう思えるのではないのでしょうか。

「CSS設計」の意味合い自体が、HTMLやCSSそのものの発展や時代背景に合わせ、流行・廃りは、あって然るべきかと思います。

「主流」であっても「絶対」ではないので、仕様によって適用するかどうか変わりますし、「過去のもの」になる可能性は充分考えられます。

※個人的な感想です。(^^;)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/12 11:47 編集

    > Bootstrap等の「フレームワーク」が登場

    この件を考慮にいれるのを忘れていました。
    確かに「CSS設計」がはやる前にBootstrapが流行っていた気がします。
    (見た目をクラス名に入れるのが気持ち悪かったのですが、cssをわざわざかかなくても
    作業がはかどる利点はそれを上回る利点と感じました)

    よくよく考えてみるとcss設計が流行りはじめたころに、
    sass等の名前もよく聞くようになりました(以前からありましたが)。
    こういったものがあったからこそ、ファイルの分割管理がすすみ、
    コンポーネント等の考えをとりいれたcss設計がすすんだかもしれませんね。

    いくつか検討違いの考えもあるかもしれませんが、
    こういった技術の進歩、はやりがあったからこそ今のcss設計が
    あると考えれば納得がいきます。

    > 「主流」であっても「絶対」ではないので、仕様によって適用するかどうか変わりますし、「過去のもの」になる可能性は充分考えられます。

    この言葉を聞いてすごく納得しました。
    頭が固すぎて「絶対」と思い込みすぎてたと思います。
    すごくすっきりしました。ありがとうございました。

    キャンセル

  • 2019/04/12 12:08

    解決されて何よりです。
    (^^)

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る