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

関連記事

  1. Web関連

    短時間でクオリティが上がる、Webデザインのテクニック

    こんにちは。育児に家事に大忙しのディレクター、望月です。W…

  2. Web関連

    【ホームページ制作】GUIの歴史を辿ってみた

    みなさんはGUIという言葉はご存じでしょうか?ぐいぐい~。GU…

  3. DX関連

    知っているようで知らない。Googleについてまとめてみる

    もはや知らない人はいないかもしれない企業、「Google」。知らず…

  4. Web関連

    業界のWebトレンド調査!スポーツ用品メーカーのサイトについてまとめてみました

    最近朝や夜が涼しく、ちょうどよい気温でとても過ごしやすいですね。私の友…

  5. Web関連

    今さら聞けない!リードジェネレーション(リード獲得)のいろはのゐ

    マーケティングの重要な使命の一つに「リードジェネレーシ…

  6. Web関連

    動画コンテンツにユーザーが求めるのは「ストーリーと客観性」だった

    いきなりですが、御社はホームページに動画コンテンツを取り入れようと考え…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    まだ自分専用だけ?シェアサービスで上手にアウトドアを楽しむ方法
  2. Web関連

    ついに来たか!Web制作者”だけ”が歓喜するお話し
  3. Web関連

    誰でもデザイナー気分!無料スマホアプリ「Fotor」!
  4. AI関連

    着るコンピューター? ウェアラブルデバイス×人工知能(AI)で出来ること
  5. Web関連

    web制作の新常識!?常時SSL化のススメ
PAGE TOP