長野県長野市・松本市ウェブ制作事業部 コンサルティングFIRM

@importは時代遅れだって?

Picture of ATFコンサルティングFIRM

ATFコンサルティングFIRM

マーケティングがあなたのビジネスの目標達成を支援します。

HubSPot+ ATFC担当に相談する

目次

これまで様々なサイトに携わってきたが、CSSファイルの細分化には気を使ってきた。
なぜなら、圧倒的に管理が楽だからだ。

制作中もさることながら、再び改修する際も自分が見て分かるようにマークアップし、IDやクラスのネーミングも統一化させ自分の中で定義付けを行うことで、久しぶりに覗く自らが書いたコードにもすんなり順応できる。

@import

その際に多用してきたのが「@import」。
CSSを細分化し(要するにブロックごとに分けたり、用途によって分けたり…)読み込ませることで、加筆や削除を容易にさせておくことができる。全体的には変えないが、ちょっと大がかりに変えるなどという場合に、他の部分に影響なすることなくスムーズな改修ができる。

しかし、@importはレンダリングが遅いのも事実だ。おそらくPHPやCGIを使ったサイトだと軽く不愉快なほど遅く、昔のWordPressやXoopsではかなり体感できるほど読み込みスピードが遅い。

Object Oriented CSS

最近では「Object Oriented CSS」という手法が採用されているとのことだが、調べてみると既に自分も少し導入していた手法であった。
IDにスタイルを定義付ける手法が一般的だ。つまりロケーション(ヘッダやフッタ…)ごとにスタイルを作る。しかし、Object Oriented CSSとはサイト全体クラスを付けて、必要なプロパティを「パーツ」のように付けていく。
簡単に言うと、よく使うプロパティは色々なところで再利用できるということだ。サイト全体をObject Oriented CSSで作ったことはないが、パフォーマンスも向上するのだろうか?
初動制作時の工数はかかりそうだが、これも自分の中のスタンダードを徐々に構築しておくことで、再び改修する時に手間がかからなそうだ。

Object Oriented CSS

SNS
松本市ホームページ制作
なぜ、成果が出るホームページと出ないホームページがあるのか?——制作と運営を左右する「熱量」の正体

私たちの元には、小規模な事業者様から売上規模30億円クラスの企業様まで、日々多くのご相談が寄せられます。 長年Web制作の現場に立ち、数多くのクライアント様と伴走してきた経験から、ある一つの結論に達しました。 ホームペー

ブログを読む »
APPLEWEBデザイン
Webデザイン制作のトレンド

1. UIレイアウト:情報の構造化と個性化 Bento Grid(弁当箱レイアウト) Appleなどの大企業が先導し、今や定番化したレイアウト。情報をカード型で整理しグリッドに配置するスタイルで、レスポンシブ対応がしやす

ブログを読む »
採用専用Webサイト
採用サイトがもたらす「攻め」と「守り」の戦略

「求人媒体に高い掲載料を払っているのに、思うような人材が集まらない」「面接に来ても、社風とのミスマッチですぐに辞めてしまう」……。多くの採用担当者様が抱えるこの悩み、実は「採用専用サイト」の構築で解決できるかもしれません

ブログを読む »