1

問題

既存のWebアプリケーションのCSS構造を再設計する必要があります。「ブランディング」をサポートします—5つの異なるルックアンドフィールがあります。各ユーザーには、勤務先の会社に基づいて1つのブランドが割り当てられています。

現在、制御不能になってから長い間、複雑なCSSファイルがたくさんあります。典型的なWebページには4つのスタイルシートが含まれており、テンプレートシステムがどれを決定します。これは、ブランドを切り替えるためにページのリロードが必要であることを意味します。

新しいCSSシステムは次のようにする必要があります。

  1. CSSスクリプト、できればLESSまたはSaSSに基づいてください。
  2. ターゲット環境で使用するスタイルシートは1つだけです。
  3. ページをリロードせずにブランドをe̲a̲s̲i̲l̲y̲に切り替えることができます。

私の考え

CSSスクリプトを使用して、一般的なブランドベースのルールを定義します。

p {
    /* general settings */
}

#brand1 p {
    /* include/redefine general settings, add some for brand1 */
}

#brand2 p {
    /* include/redefine general settings, add some for brand2 */
}

<div>全身のアウターを作成しid、JavaScriptbrand1でbrand2、などに切り替えます。この方法では、CSSをスクリプト化する必要はなく、すべての要素の「コンテキスト」を1行のJavaScriptで切り替えるだけです。

私はCSSの初心者なので、まったく間違ったことをしないようにしたいと思います。コメントしてください。

4

5 に答える 5

2

私はこのようにします：

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>            
    </head>
    <body>
        <div class="wrap">
            <div class="side">
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#" class="active">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                    <li><a href="#">Link 5</a></li>
                </ul>
            </div>
            <div class="main">
                <h1>Welcome</h1>
                <h2>A Paragraph</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
                </p>
                <h2>A List</h2>
                <ul>
                    <li>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                    </li>
                    <li>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
                    </li>
                    <li>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS

body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}

テーマ

今、私たちの仕事は、それらのコンポーネントを特定することです。ここでは、基本レイアウトを使用して、順序付けされていないリストの色とリストスタイルのみをテーマにすることができます。最初にそれらのスタイルだけを取得しましょう。初心者向けのチュートリアルなので、レイアウトではなく、前景色と背景色のみに集中しましょう。

最初のクラスに名前を付け.lightましょう。同じもののCSSは次のようになります。

.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}

JavaScript

次に、コードを変更するには、テーマの変更を処理する3つのリンクまたはボタンを追加する必要があります。したがって、HTMLに、次の3つのリンクを追加しましょう。

HTML

<div class="wrap themelinks">
    <h4>Change Themes:</h4>
    <a href="" class="theme">No Theme</a>
    <a href="light" class="theme">Light</a>
    <a href="grayscale" class="theme">Grayscale</a>
</div>

CSS

.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}

jQuery

$(document).ready(function(){
    $(".theme").click(function(){
        var theClass = $(this).attr("href");
        $("body").removeAttr("class").addClass(theClass);
        return false;
    });
});

デモ

jsBinで動作するデモを確認できます。

于 2013-03-03T12:29:27.173 に答える
1

classページの一般的なレイアウトを定義する単一のブランド化されていないスタイルシートを作成してから、<body>要素のによって異なるブランド固有のルールを定義します。次に例を示します。

/* Layout area */
#header {
    height: 50px;
    margin: 0.2em; }

etc...

/* Brand A rules */
.brandA #header {
    background-image: url("brandALogo.png"); }
.brandA #footer {
    background-color: purple; }

/* Brand B rules */
.brandB #header {
    background-image: url("brandBLogo.png"); }
.brandB #footer {
    background-color: orange; }

...だから、何も再定義する必要はありません。

次に、単純なスクリプトクライアントを使用して、のclass属性を必要に応じ<body>て「brandA」または「brandB」に変更します。

idID属性として、ドキュメント内で静的で不変である必要があるため、この属性を使用しないことをお勧めします。

于 2013-03-03T12:18:40.620 に答える
1

私は1つの要素に対してこのようにします：

div {
    /* general settings */
}

div.band1 {
    /* include general settings, add some for brand1 */

    /* redefine general settings, add some for brand1 */
    font-weight: bold !important;
}

div.band2 {
    /* ... */
}

その他の要素（デモ）：

h1{
  font-weight: bold;
  color:green;
}
.band1 h1{
  background-color:red;
  color: white;
}
.band2 h1{
 background-color:yellow;
}
.band1 .head2{
  background-color:red;
}
.band2 .head2{
 background-color:yellow;
}
.band1 #text{
  background-color:red;
}
.band2 #text{
 background-color:yellow;
}
于 2013-03-03T12:24:13.390 に答える
0

レイアウトを個別に定義してから、同じものをすべて定義します。たとえば、形状と全体的なUXを定義します。最後の仕上げには、次のようなより深いセレクターを使用します。

各ブランドのページのスタイルには、もう1つの外部セレクターが必要です。たとえば、ページの外部ラッパーに接続されているidなどです。したがって、最初に外部ラッパー（または本文、これはお勧めしません）はid="default"にする必要があります。 ..デフォルトでは、cssで参照を一切使用しないでください。その後、他のすべてのブランドをcssで選択して、本体にid="brand1"または"brand2"などを設定する必要があります。

インタラクションでブランドを変更すると、次のようになります。

$(wrapper selector).attr('id', 'brandX');

何が起こるかというと、cssは、外部のDOMコンテナーがもう1つ追加されたために、デフォルトのコンテナーよりも重要な他のセレクターに対応するページを再レンダリングします。

このようにセレクターを変更すると、css3と任意のDOM操作jsエンジンが完全な専門知識を持っていると仮定して、ページを好きなように微調整することができます：D

于 2013-03-03T12:28:36.633 に答える
-1

cssを動的にロードすることもできます（たとえば、いくつかのパラメーターに基づいて生成する場合）。このコード行でそれを行います：

$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

もう1つの利点は、ユーザーが不要なすべてのブランドのすべてのスタイルシートをダウンロードする必要がないことです。

于 2013-03-03T12:20:48.943 に答える