1

问题

我需要重新设计现有 Web 应用程序的 CSS 结构。它支持“品牌”——它有 5 种不同的外观。每个用户都有一个指定的品牌，具体取决于他们工作的公司。

目前我们有一堆复杂的 CSS 文件，它们早已失控。一个典型的网页包括 4 个样式表，模板系统决定哪些。这意味着需要重新加载页面才能切换品牌。

一个新的 CSS 系统应该：

  1. 基于 CSS 脚本，最好是 LESS 或 SaSS。
  2. 在目标环境中只使用一个样式表。
  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使用 JavaScript 将其切换为brand1,brand2等。这样我不需要以任何方式编写 CSS 脚本，只需使用一行 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

现在要更改代码，我们需要添加三个链接或按钮来处理主题更改。所以，在 HTML 中，让我们添加这三个链接：

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

对于一个元素，我会这样做：

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 回答
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”。

我建议不要使用该id属性，因为作为身份属性，它在文档中应该是静态且不变的。

于 2013-03-03T12:18:40.620 回答
0

独立定义布局，然后定义所有相同的东西，比如说形状和整体用户体验......然后为最后的触摸使用更深的选择器，如下所示：

每个品牌的页面样式应该有一个额外的外部选择器，例如连接到页面外部包装器的 id，因此对于开始事物外部包装器（或主体，altoho，我不推荐这样做）应该是 id="default"。 ..默认在css中应该没有任何引用，然后应该在css中选择所有其他品牌，以便body具有id =“brand1”或“brand2”等。

在 Interaction 中，您只需执行以下操作即可更改品牌：

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

发生的事情是 - css 重新渲染页面以容纳其他更深的选择器，因为添加了一个外部 DOM 容器，因此比默认容器更重要。

以这种方式更改选择器使您能够根据自己的喜好微调页面，假设 css3 和任何 DOM 操作 js 引擎都是您的全部专业知识：D

于 2013-03-03T12:28:36.633 回答
-1

您还可以动态加载 css（例如，如果您想根据某些参数生成 css）。用这行代码来做：

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

另一个好处是用户不需要下载他不想要的所有品牌的所有样式表

于 2013-03-03T12:20:48.943 回答