2

スタック オーバーフローに関する CSS のベスト プラクティスに関する質問には、他にも多くの適切な回答があります。

しかし、私は別の問題を抱えていると思います。

divやなどを使用して適切に構築された既存のサイトを「再スキン化」しようとしていulます。既存の適切な CSS ファイルがありますが、CSS に変更を加え始めるとすぐに、レイアウトを崩します。私の感覚では、すべての CSS がどのように連携して動作するか、実際にどの CSS が HTML の親要素と兄弟要素に影響を与えているかを把握するのは非常に難しいと思います。

それで、私の質問は、「既存の HTML を変更せずに CSS のみを置き換えることによって、既存の Web サイトの再スキン化に関するベスト プラクティスは何ですか?」ということです。クラス、ID、ノード階層などを変更できません。

再スキンしようとしている特定のサイトの例はhttp://demo.nopcommerce.com/です。

既存の CSS は、メインの CSS ファイルから抽出した次のように複雑で詳細なものにすることができます。

.header-selectors-wrapper
{
    text-align: right;
    float: right;
    width: 500px;
}

.header-currencyselector
{
    float: right;
}

.header-languageselector
{
    float: left;
}

.header-taxDisplayTypeSelector
{
    float: right;
}

.header-links-wrapper
{
    float: right;
    text-align: right;
    width: 570px;
}

.header-links
{
    border: solid 1px #9a9a9a;
    padding: 5px 5px 5px 5px;
    margin-bottom: 5px;
    display: inline-table;
}

.order-summary-content .cart .cart-item-row td, .wishlist-content .cart .cart-item-row td
{
    border-bottom: 1px solid #c5c5c5;
    vertical-align: middle;
    line-height: 30px;
}

.order-summary-content .cart .cart-item-row td.product, .wishlist-content .cart .cart-item-row td.product
{
    text-align: left;
    padding: 0px 10px 0px 10px;
}

.order-summary-content .cart .cart-item-row td.product a, .wishlist-content .cart .cart-item-row td.product a
{
    font-weight: bold;
}

どんな助けでも大歓迎です。

4

4 に答える 4

1

crimson_penguin と Jon P はどちらも使用するのに適したツールを提案しているので、一般的なアドバイスを少し紹介します。

これがあなたの状況で私がすることですが、それは決して解決策ではありません.

まず第一に、最終製品をどのように見せたいかを知ってください。最終的にどこに行きたいかを最初から把握できるように、設計を準備します。細かいところにも気を配る「鍛錬で汗をかくほど、戦いで血は出ない」

第二に、すぐに慣れることになるので、現在の CSS に慣れてください。必要に応じて、特定の階層に作用するものをグループ化するなどして、すべてを並べ替えます。

例えば：

#navigation {....}
   #navigation #left {....}
     #navigation #left h1 {....}
     #navigation #left p {....}
   #navigation #right {....}

設計を行い、現在のコードを把握したら、いくつかの変更を開始します。テキストのブロックや画像など、単純で低レベルの要素から始めます。次に、これらの周りに構築できます。以前の 2 つの投稿者が言及したように、Firebug (Firefox 用) と DOM-Inspector (Safari/Chrome 用) は、ページがどのように見えるかを確認するまで、何もコミットせずにページでいろいろなことを試すことができるため、非常に役立ちます。

それは長く、潜在的にストレスの多いプロセスですが、少しの忍耐と忍耐力があれば、すぐにそこにたどり着くことができます.

于 2010-03-29T05:14:48.087 に答える
1

これを行う場合、WebKit の DOM インスペクターを広範囲に使用することになります (ページを右クリックして [要素の検査] を選択すると、Safari または Chrome で使用できます)。node/class/id 構造に頭を悩ませるだけでなく、作成中の新しい css をデバッグするのにも役立つと思います。

ソースはツリー ビューであり、ノードはデフォルトで折りたたまれているため、単にソースを見るよりもはるかに便利です。また、ノードのメトリクス (幅/高さ/パディング/ボーダー/マージン) を検査し、どのスタイルがどの順序で適用され、最終的なスタイルが使用されているかを表示するための非常に便利な機能がいくつかあります。

于 2010-03-29T04:22:00.017 に答える
1

Firefox 用のFirebugプラグインを使用することをお勧めします。これを使用して、CSS ファイルに永続的な変更を加えることなく、ブラウザでページを表示しながら既存の CSS を編集することで、CSS の変更をプレビューできます。スタイルの「カスケード」などのアイデアも得られます。

JavaScript のデバッグにも非常に便利なツールです。

于 2010-03-29T04:54:31.377 に答える