Question

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

enter image description here

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

这里我试图创建一个抽象层，以便我的css文件可以使用一些不同的UI库（无论是bootstrap，纯粹还是基础）＆amp;代码仍然可以工作。

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

<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＆amp;内部进行更改。它应该仍然有效。我的HTML文件引用my-magic-stylesheet.css，my-magic-stylesheet.css可以引用我指定的任何库。

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

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

Answer 1

使用 LESS ：

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

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

Answer 2

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

使用CSS创建抽象

2 个答案: