关闭。这个问题需要details or clarity .它目前不接受答案。
想改进这个问题？通过 editing this post 添加详细信息并澄清问题.
8年前关闭。
Improve this question
我不确定它是正确的标题，如果不是，请随时更改它。我不是以英语为母语的人，所以我会尽力在图片的帮助下解释:
让我们假设，我有一个纯 HTML 文件。该文件使用按钮并使用一些 UI 库(如 Yahoo Pure)。但是我没有使用 Pure 的类，而是使用我自己的类，我们称之为 myButton ，它实际上使用纯 CSS(或任何其他)。但是如何？
在这里，我试图创建一个抽象层，以便我的 css 文件可以使用一些不同的 UI 库(无论是 Bootstrap 、纯程序还是基础程序)并且代码仍然可以工作。
如果没有这个解决方案，我会这样做(我的初始代码是):
<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 工具的新手。无论如何我可以使用它们来解决我的问题吗？
最佳答案
使用 少 :
.myButton {
.btn;
.pure-button;
}
在这里，您仍然需要手动处理许多类名，但至少只需一次。
关于html - 使用 CSS 创建抽象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18301716/