9

我不确定它是正确的标题，如果不是，请随时更改它。我不是以英语为母语的人，所以我会尽力在图片的帮助下解释：

在此处输入图像描述

让我们假设，我有一个纯 HTML 文件。该文件使用按钮并使用一些 UI 库（如 Yahoo Pure）。但是我没有使用 Pure 的类，而是使用我自己的类，我们称之为它myButton，它实际上使用 Pure CSS（或任何其他）。但是如何？

在这里，我试图创建一个抽象层，以便我的 css 文件可以使用一些不同的 UI 库（无论是引导程序、纯程序还是基础程序）并且代码仍然可以工作。

如果没有这个解决方案，我会这样做（我的初始代码是）：

<html>
    <head>
        <link rel="stylesheet" href="http://yahoo-pure.com/pure-min.css">
    </head>
    <body>
        <button class="pure-button" type="button">Some Button</button>
    </body>
</html>

然后，如果我改变主意并决定使用 bootstrap ：

<html>
    <head>
        <link rel="stylesheet" href="http://twitter-bootstrap.com/bootstrap.css">
    </head>
    <body>
        <button class="btn" type="button">Some Button</button>
    </body>
</html>

所以我必须在这里做两处更改，一个是源 css 文件（不是大问题）和按钮类（如果代码很大，这是一个非常大的问题）。（想象一下如果我使用网格和其他东西我必须做出的改变）

如果我能够做这样的事情怎么办：

<html>
    <head>
        <link rel="stylesheet" href="my-magic-stylesheet.css">
    </head>
    <body>
        <button class="myButton" type="button">Some button</button>
    </body>
</html>

所以，当我想从 Bootstrap 切换到 Pure 时，我只在内部进行更改my-magic-stylesheet.css，它应该仍然可以工作。我的 HTML 文件引用my-magic-stylesheet.css并且my-magic-stylesheet.css可以引用我指定的任何库。

我想到的一个解决方案是，这很简单，我编写了一个 python 脚本。首先，我记下不同的类及其各自的 UI 库。然后我将编写一个 CSS，在其中我将使用通用类名，如myButton. 然后我将把这个 css 提供给我的脚本，并将 UI 库的名称作为另一个输入。该脚本将运行 css 文件并相应地进行更改。（例如更改myButton为btn如果脚本的另一个输入是bootstrap）

但是有没有更好的方法呢？可能不使用python脚本？或者您想到的任何解决方案？我也是 LESS/SASS 等 CSS 工具的新手。无论如何我可以使用它们来解决我的问题吗？

4

2 回答 2

1

使用LESS：

.myButton {
    .btn;
    .pure-button;
}

在这里，您仍然需要手动处理许多类名，但至少只需一次。

于 2013-08-18T17:42:11.193 回答
0

嗯……有趣的问题。我认为你错过了一个非常重要的观点。如果您从一个框架跳到另一个框架，您不仅会更改类的名称，还会更改您的 html 标记。因此，即使您为btn喜欢的问题找到了一个好的解决方案，您也可能找不到网格定义的问题。即引导程序可能需要两个新的div标签包装器和基础可能只需要一个。所以，我认为在你的情况下最好的方法是模块化一切。即创建各种数量的组件。每个组件都将具有三个（或所需框架的数量）模板。我的意思是在你的情况下，html 标记看起来比 css 本身更重要。最后，您需要做的是在顶部导入框架的库并使用正确的模板。您不必处理 CSS 类覆盖或类似的事情。如果你去那里，那就是地狱。

于 2013-08-18T19:25:03.687 回答