Question

假设我在index.html中得到以下内容，并且正在使用Bootstrap ：

<head>
bootstrap stylesheet
main.css stylesheet
...


<button class="btn btn-primary">Button</button

Btn-primary是用于将按钮变为蓝色的类。

我想将所有主要按钮更改为红色。

我直接去Boostrap课很不好还是应该自己做一个？在main.css中：

btn-primary{ background: red; }

VS

btn-red{ background: red; } //applying that class to the button in question obviously

我要问的只是关于良好实践。

我知道两者都可以。

我只是想知道我是否确实使用引导程序类，所以我正在做一些通常不被接受的事情。

Answer 1

优良作法是不要在框架提供的文件中编辑框架代码。

在我的实践中，我使用override.css文件（或文件的一部分）专门覆盖框架样式。

例如：

/* Bootstrap.css */
.btn-primary {
    background-color: not-red;
}

/* Override.css - load this after Bootstrap.css */
.btn-primary {
    background-color: red;
}

**请注意，这是一个简化版本，有时框架会具有比简单的类样式更具体的选择器，例如form .btn-primary用于<form>按钮。在这种情况下，您可以选择不指定框架，也可以在样式中使用!important。

如果Bootstrap更新了他们的框架，对我来说更新和保留样式很简单。这也解决了冗余类的问题，因为您仍然可以按照自己的样式使用Bootstrap类。

在引导类上使用自定义CSS的不良习惯吗？

1 个答案: