Web関連

【Web制作会社に聞く】一番良いCSSってなんだ!?

0

いろいろな書き方が存在するCSS!

まずはおさらいですが、CSSとはHTMLに記載できないページのデザイン要素を書くことができるファイルのことです。

ですがこのCSS、HTML以上にコーダーによって記述方法がバラバラになりがちなのです。

結論から言いますとCSSは「設計」をしっかり行ってサイトごとにブレがなければ、どんな書き方をしてもOKだと思います。

ただし、ソースが無駄に長くなってしまったり、編集がしにくいもの、構文エラーのものはダメですが(笑)

設計さえすればどんなものを書いてもよい、とは言ってもWeb制作会社として”これが最適”というものを定めたいと思いいろいろなCSSを検証してみました!

OOCSS

OOCSS(オーオーシーエスエス)というものがあります。
なんの略かというと(Object Oriented Cascading Style Sheets!)

基本的な考え方としてはレイアウトに関わるCSSと色や大きさに関わるCSSを分けて記載するというもの。

信号というレイアウトを表すCSSと赤、青、黄を表すCSSを別々に書いて、赤の時の信号、青の時の信号、黄色の時の信号を2つのCSSで表すというものです。

さらに、その赤というCSSはポストやリンゴというレイアウトにも使うことができるので便利!
といった感じです。

ですが、デメリットとしてCSSを見ただけでどの部分のCSSなのかが分かりにくく、メンテナンスの時に担当が変わったなどの時に煩雑になりがちです。

これだと、メンテナンスにも強い弊社のフォーマットとしては微妙、、、

SMACSSとBEM

SMACSS(スマックス)というもの、BEM(ベム)というものがあります。

それぞれの略は
・Scalable and Modular Architecture for CSS
・MindBEMding
だそうです。

なんだか難しい単語が並んでいますが、SMACSSというCSSはOOCSSとは違ってベース、レイアウト、モジュール、状態、テーマという要素にCSSを分けて、メンテナンス性を高めたものです。

BEMはさらにクラス名をさらに分かりやすく、人にやさしい命名ルールにしたものです。

欠点としては定義する名前が長くなりがち。
でも人には分かりやすくメンテナンスに強そう!

これ以外にも世の中にはいろいろなCSSのフォーマットが存在していて、
どのCSSもメリットとデメリットがありますが、どの開発者も自分のCSSが一番!
って思っているでしょう(笑)

 

では何が一番良いのか!作ってしまえ!

では何が一番良いCSSなのか?と考えた時にWeb制作会社としてメンテナンス性が高くて汎用性もそれなりにあって、
検索エンジンも優しいCSSフォーマットを作ることにしました!
そして現在、誠意制作中になります。

次回のコラム(もしくはその次、、)で発表できるように進めていこうと思います!

css_15040302.jpg

関連するサービス

ホームページ制作

0

Web広告のバナーは「つかみ」のキャッチコピーで決まる!?前のページ

Web制作でも重要!顧客満足度を高めるための3つポイント次のページ

ピックアップ記事

  1. 新しい販売形態であるDtoCについて考えてみる
  2. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  3. AIに求められているものは、実は意外な物だった
  4. 新型コロナウイルスで日本の働き方改革が起こる

関連記事

  1. Web関連

    デジタルコミュニケーションの可能性

    デジタルコミュニケーションとは、インターネットを使って、情報を収集・配…

  2. Web関連

    WordPressをCMSとして活用するためのプラグイン Advanced Custom Field…

    こんにちは! 最近、会社の近くの吉そばに週5で通っているSEの岸沢です…

  3. Web関連

    分かる分かるー。スマートフォンサイトコーディングあるある

    以前スマートフォンサイト制作について書きましたが、今回はコーディングす…

  4. Web関連

    WordPressをCMSとして活用するためのプラグイン Advanced Custom Field…

    こんにちは! 休日はチャギントンを見て過ごしたSEの岸沢です。チャ…

  5. Web関連

    今注目のクロスチャネル・キャンペーン・マネジメント(CCM)とは?

    最近よく耳にする、クロスチャネル・キャンペーン・マネジメント(以下CC…

  6. Web関連

    ネットゲームから学ぶゲーミフィケーション

    こんにちは!ゲーム大好きなデザイナー熊倉です。さてみなさんは、インター…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    オタクと刀と活性化
  2. Web関連

    HTML5で3D表現!?
  3. サービス・新技術

    コロナの逆風に対抗する、飲食業界の新しい歩み方
  4. AIさくらさん

    ホテル業務を10分の1に削減できちゃうRPAさくらさん!
  5. Web関連

    リターゲティング広告の性質を逆に利用!新たなバナー広告活用法
PAGE TOP