web-dev-qa-db-ja.com

Zurb Foundationの基本CSSスタイルをオーバーライド/編集する方法は？

ZurbFoundationをWebプロジェクトに使用するのは初めてです。ただし、別のスタイルシートで自分のスタイルを上書きするのか、_foundation.css_を直接編集するのかはわかりません。

たとえば、これは彼らのナビゲーションCSS（_foundation.css_内）です：

_.nav-bar {
    background: #4D4D4D;
    height: 40px;
    margin-left: 0;
    margin-top: 20px;
    padding: 0;
}
_

backgroundと_margin-top_を変更したい場合は、_.nav-bar_から_foundation.css_を直接編集するか、独自のスタイルシートを作成しますか（_style.css_を_foundation.css_）そして次のようにオーバーライドします：

_.nav-bar {
    background: #999;
    margin-top: 0;
}
_

これは良い習慣ですか？そうでない場合、それについて行くための最良の方法は何でしょうか？

cssframeworkszurb-foundationcss-frameworks
12
catandmouse

ベストプラクティスは、説明したようなカスタム.cssファイルを使用してスタイルシートを上書きすることです。このようにして、更新がリリースされた場合、たとえば、バグ修正の場合、foundation.cssファイルを置き換えるだけです。

Foundation.cssファイルを直接編集し、フレームワークを更新する場合は、手動で更新する必要があります。

21
Ed Charbeneau

ベストプラクティスは、Zurb FoundationのWebサイトでドキュメントを読むことです。 2番目のベストプラクティスは、ダウンロード内で2つのフォルダーcssおよびjsを開くことです。このフォルダ内には次のものがあります。

app.cssおよびapp.js

これらはZurbがあなたのために事前に作成したファイルなので、それらのスタイルをオーバーライドし始めることができます！

Foundation.jsまたはFoundation.cssに触れることはお勧めしません。将来のオプションのためにアップグレードすることはできません。または、ブレーキをかけたくないものにブレーキをかける可能性があります。ハッピーコーディング！

10
Hercules S.

実際、Foundation（または主要なフレームワーク）のスタイルをオーバーライドする最良の方法は、SASSおよび/またはCompassバージョンを使用することです。 （または、Bootstrapのスタイルを設定しようとするほど不幸な人には少ない）

_settings.scssファイルを調べて色、高さ、ブレークポイントを変更する方が、必要なすべてをオーバーライドしたことを確認するために数千行のcssコードを調べてみるよりもはるかに簡単です。

はい、すべてを設定するのは少し学習曲線ですが、長期的には時間を節約できます。

1
RioBrewster

実際には、foundation.cssファイルを使用するだけです。デフォルトのCSSインストールを使用するのではなく、カスタムのFoundation CSSインストールを作成する場合、指定するカスタマイズはこのファイルに存在します。 Zurbがバグや更新に対処するためにこのファイルを変更する場合、このファイルはすべてのインストールで同じである必要がありますね。

Zurbのドキュメントには、「foundation.cssは、実際の基盤となるFoundation CSSを分解する必要がない場合に、ページで使用できるCSSファイルです」と記載されています。

1
Malcolm