【问题标题】：How can I manage stylesheets for different layouts dynamically?如何动态管理不同布局的样式表？
【发布时间】：2012-11-02 10:37:00
【问题描述】：

我正在尝试建立一个门户网站，让房地产经纪人可以展示他们的财产。每个用户都可以构建自己的一组彩色主题，但基本布局保持不变。用户只能更改布局中不同块的背景颜色、文本颜色。管理此问题的最佳方法是什么？

将所有详细信息保存在数据库中并提供 css 文件是否很好？我想这会延迟页面加载。是否还有其他选项，例如使用 XML 等？

【问题讨论】：

您当然希望以某种方式保存变量（数据库、平面文件等）以便于编辑，但没有理由在每个页面视图上都生成它。房地产经纪人不会一直摆弄 CSS，因此您需要缓存“已编译”的 CSS。对您的服务器更好，对用户更好。

标签： javascript css templates dynamic

【解决方案1】：

您可以通过将一个类设置为每个用户的主要body 标记，从一个字段中获取，可能是来自SQL 数据库的theme。我早就写了一篇关于它如何工作的教程。你也一样：

在 Web 中轻松进行主题化

我们中的许多人都会有这个问题。主题随处可见，但我们自己的网站中的主题呢？我们有桌面主题、wordpress 主题，甚至是手机主题。我们不能在我们的网站上提供相同的功能吗？尽管我们已经看到许多具有主题功能的网站，但它们似乎很难！

传统的网页主题

现在让我们看看网络中的传统主题是如何工作的。他们有两个以上的样式表 (CSS)，并且他们使用 JavaScript 将原始样式表替换为新样式表。这是非常困难和棘手的，因为更改样式表href 是不可取的，而且旧浏览器也不支持它们！

提议的简单主题

好吧，还有另一种更好、更简单的方法可以做到这一点，但不会替换 DOM 元素及其属性。由于 CSS 是基于类和规则的，所以最好将布局和呈现分开，我们可以通过类来区分。好了，理论说的够多了。让我们进入实际部分。

考虑一个网页XHTML 1.1，它有几个组件，即带有链接的侧边栏，可以这样在 HTML 中给出：

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>

现在我们需要在<link>标签的帮助下给文档添加一些样式：

<link rel="stylesheet" href="style.css" type="text/css" />

在style.css 中，我们将首先添加样式来描述演示的方式。

布局

首先是骨架 CSS，对于这里的所有元素：

body {}
body .wrap {}
body .wrap .side {}
body .wrap .side ul {}
body .wrap .side ul li {}
body .wrap .side ul li a {}
body .wrap .side ul li a:hover {}
body .wrap .side ul li a.active {}
body .wrap .main {}
body .wrap .main h1 {}
body .wrap .main h2 {}
body .wrap .main p {}
body .wrap .main ul {}
body .wrap .main ul li {}
body .wrap .main ul li p {}

完全填满 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;}

主题

现在我们的工作将是识别主题组件。在这里，使用基本布局，我们只能主题化无序列表的颜色和列表样式。让我们先单独了解这些样式。作为初学者的教程，让我们只关注前景色和背景色，而不是布局。

body {color: ; background: ;}
body .wrap .side ul li a {color: ; background: ;}
body .wrap .side ul li a:hover {color: ; background: ;}
body .wrap .side ul li a.active {color: ; background: ;}
body .wrap .main {background: ;}
body .wrap .main h1 {color: ;}
body .wrap .main h2 {color: ; background: ;}
body .wrap .main p {color: ;}
body .wrap .main ul li p {color: ;}

现在有了这组规则，我们需要添加类。 Body 是内容的最顶层父级。因此，我们将向<body> 添加类并更改其他类的规则。

让我们将第一个类命名为 .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;}

以上颜色是一些疯狂的组合。现在让我们创建另一个主题，让一切都成为grayscale。所有颜色的红色、绿色和蓝色值应相同。

.grayscale {color: #333; background: #ccc;}
.grayscale .wrap .side ul li a {color: #666; background: #eee;}
.grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
.grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
.grayscale .wrap .main {background: #fff;}
.grayscale .wrap .main h1 {color: #333;}
.grayscale .wrap .main h2 {color: #fff; background: #999;}
.grayscale .wrap .main p {color: #666;}
.grayscale .wrap .main ul li p {color: #999;}

JavaScript

我们将使用 jQuery 来简化我们的工作。所以，在<head> 部分，我们将添加一个指向 jQuery 库的链接，可能来自 Google APIs。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

请注意，我们使用 jQuery 1.7.2 是出于稳定性目的。现在要更改代码，我们需要添加三个链接或按钮来处理主题更改。因此，在 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;}
.themelinks h4 {margin: 0; padding: 10px;}
.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.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;
    });
});

在这里，我们只更改了所有浏览器都支持的<body> 标签的class 属性。我们还在链接的.click() 函数中添加了return false;，以免传播到<a> 标记的href 属性中指定的链接。

最终的 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>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <title>Themed Website</title>
        <style type="text/css">
            body {font-family: segoe ui; background: #fff;}
            body .wrap {width: 90%; margin: auto; overflow: hidden; border: 1px solid #ccc;}
            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 {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;}

            .grayscale {color: #333; background: #ccc;}
            .grayscale .wrap .side ul li a {color: #666; background: #eee;}
            .grayscale .wrap .side ul li a:hover {color: #333; background: #ddd;}
            .grayscale .wrap .side ul li a.active {color: #333; background: #fff;}
            .grayscale .wrap .main {background: #fff;}
            .grayscale .wrap .main h1 {color: #333;}
            .grayscale .wrap .main h2 {color: #fff; background: #999;}
            .grayscale .wrap .main p {color: #666;}
            .grayscale .wrap .main ul li p {color: #999;}

            .wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
            .themelinks h4 {margin: 0; padding: 10px;}
            .themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
            .themelinks .theme:hover {background: #f90; color: #fff;}
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".theme").click(function(e){
                    var theClass = $(this).attr("href");
                    $("body").removeAttr("class").addClass(theClass);
                    return false;
                });
            });
        </script>
    </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>
        <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>
    </body>
</html>

您可以在jsBin 中查看工作演示。

【讨论】：

谢谢普拉文！这应该会有所帮助。我正在使用 Laravel 构建我的应用程序，并将研究如何适应它。此外，用户将即时构建样式表。将解决此问题并在需要时返回。谢谢您的朋友
这似乎是一种非常复杂的网站主题方式。替换每个元素上的每个类？如果他试图将每一个可能的主题混合到一个文件中，那么 OP 的 CSS 将会变得非常糟糕。没有理由这样做。备用样式表的存在是有原因的。
@cimmanon 不，他可以在主题级别的样式表中使用它。而且，仅仅通过操纵类，他就可以做到这一点。我们在企业级应用程序中执行此操作，但不会影响性能。 :)
@NullPointer 我想给你发了一封邮件。明白了吗？