Bootstrap最佳实践?

时间:2017-08-17 16:54:12

标签: css twitter-bootstrap web bootstrap-4

我同时进行网页设计和开发。我通常喜欢编写自己的CSS而不使用任何框架。在我目前的项目中,客户说完完设计之后,如果我还可以编写HTML和HTML代码,它将有助于他们的开发团队。 CSS。他们的要求是使用Bootstrap 4。

我说好了,开始工作了。但是,在使用Bootstrap时,我对最佳实践有一些疑问。 例如,假设我想要一个 .navbar-text ,它需要一个带有某种非主题颜色的左边框。我的问题是:

  • 我应该为此创建一个新类,还是仅覆盖 .navbar-text 类?通常我会关注BEM并为此创建一个新类,但我不确定在这种情况下是否会造成混淆。
  • 由于我已经为边框添加了CSS规则,我是否应该继续在元素上添加Bootstrap实用程序类,还是应该只将CSS添加到新规则中?假设我想添加一些左边距,我应该将 pl-2 类添加到元素中,还是应该将 padding-left:0.5rem 添加到我的CSS规则中?

我想让我们的代码尽可能简单,让他们的开发团队合作,我不知道如何继续。任何建议将不胜感激。

1 个答案:

答案 0 :(得分:3)

  

我应该为此创建一个新类,还是只覆盖它   .navbar-text类?通常我会关注BEM并创建一个新类   为此,但我不确定这是否会引起混淆   实例

创建一个新类。覆盖或更改引导类是不行的,因为如果它们最终升级到新版本的引导程序,或者开始使用CDN vs本地托管(反之亦然),那么它将停止工作,并且它们赢得了#39不知道为什么。将引导程序作为引导程序使新开发人员可以轻松地进入并且不必提出问题"是这个引导程序,还是它们特定的引导程序风格"。

编辑:

为了澄清,在您的示例的情况下,我将创建一个实用程序类并将其添加到元素。所以在html中你会class="navbar-text left-border"和我的css .navbar-text.left-border{border-left: 1px solid black;}而不是.navbar-text{border-left: 1px solid black !important;}

  

由于我已经为边框添加了CSS规则,我应该继续   在元素上添加Bootstrap实用程序类,或者我应该添加   CSS到我的新规则?假设我想添加一些左边填充,我应该添加   pl-2类到元素,或者我应该添加padding-left:0.5rem到   我的CSS规则?

将其添加到现有规则中。以这种方式思考:

假设您改变主意并且实际上不再需要填充,或者您想将其更改为新值。您是希望在您的CSS中的某个位置更改它,还是在您的HTML中使用该类的任何位置?