18

我正在开发一个刚刚开始的 Rails 项目。我们想使用 twitter bootstrap 作为我们样式的基础，一开始我们会直接在 HTML 代码中使用 bootstrap 的类名，就像在 bootstrap 的文档中显示的那样，但是在阅读了以下帖子之后：

可维护 CSS 中的经验教训

请停止在您的 HTML 中嵌入 Bootstrap 类

很清楚为什么这不是使用引导程序的正确原因，所以在阅读了更多内容之后：

将 CSS 与 HTML 解耦

smacss

除此之外，似乎使用 sass @extend 是避免使用引导程序的类名的正确方法，所以不要这样做：

<button type="submit" class="btn">Search</button>

我们会这样做：

<button type="submit" class="button">Search</button>

我们的 sass 代码如下所示：

.button {
   @extend ".btn";
}

这种方法的问题是，除了每次我们扩展引导类以使用不同的名称时将添加的一堆额外选择器之外，在引导程序使用如下选择器的情况下：

.form-search .input-append .btn, .form-search .form-input-append .btn {
  border-radius: 0 14px 14px 0;
}

该按钮不会获​​得正确的样式，因为 sass 不会将相同的规则应用于我们的自定义类名，我的意思是，sass没有这样做：

.form-search .input-append .btn, .form-search .input-append .button, 
.form-search .form-input-append .btn, .form-search .form-input-append .button {
  border-radius: 0 14px 14px 0;
}

所以我想知道，这是避免将引导程序的类名嵌入到 HTML 中的正确方法，如果是这样，我应该如何处理这个问题（它经常发生）？如果不是，那么使用自定义类名但仍然从引导程序中获取样式的更好方法是什么。

我非常感谢您对此的想法。请记住，我只是在学习整体网页设计（css、sass、less、html、js 等）。

4

5 回答 5

2

我建议您查看 sass 占位符类http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders，以免使您的 css 膨胀。很可能您不会使用引导程序中包含的每个元素，并且占位符只有在您的代码中实际扩展时才会写入您的样式表。

此外，我认为人们往往会对 css 框架的工作方式以及 css 和 html 的解耦实际工作方式感到困惑。对于非常大的网站（或您期望最终会变得非常大的网站），性能和 css 文件大小至关重要，某种 OOCSS 方法是您的最佳选择。这意味着您不可避免地会在 HTML 中直接使用格式化代码。

如果您可以让自己的效率降低一点并且希望您的 HTML 干净，请确保使用语义类（按钮示例：call-to-action、call-to-action-secondary、submit、btn-primary、btn-企业颜色等...）

还要记住将你的 JS 与 CSS 解耦！使用特殊的类来附加行为（例如 js-submit、js-call-to-action 等......）

最后但同样重要的是：不要计划更新您的 CSS 框架。这些框架旨在为您提供先机，而不是成为您的整体设计解决方案。扩展它们、调整它们、使它们成为你自己的、投资于设计并创建你自己的外观，以使你的应用程序独一无二。如果让您想到更新的原因是担心跟上标准更改，那么最好使用 compass mixins。

于 2013-11-24T11:53:08.740 回答
2

当您将 .btn 重命名为 .button 时，您还应该将 .form-search 重命名为 .form-searchnew 等吗？在这种情况下，上面示例中的 sass 代码应该类似于：

.form-searchnew .input-appendnew .button {
  extend(.form-search .input-append .btn);
}

这很有意义（我不知道 sass）并导致您期望的 css。

我认为引导程序不仅仅与 CSS 有关。Bootstrap 是关于 css、html（结构）和 javascript 的。即使您将 css 与 html 分开，我也不容易迁移到其他框架。除了 css，您还必须更改 html 结构和 javascript 调用。

示例从 Twitter 的 Bootstrap 2 迁移到 3（请参阅：将Bootstrap 更新到版本 3 - 我需要做什么？）。我还想知道您是否可以通过将旧类扩展到新 css 来进行迁移（请参阅：http ://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap -3/ )。阅读迁移指南后，我认为您不能。

其他解决方案。Angular JS 将 Twitter 的 Bootstrap 与 javascript 分离。同样在这种情况下，迁移似乎也不是无痛的，请参阅：Angular Dialog directives with Bootstrap 3

也许也读过这篇文章：http ://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to 。它指的是Bourdon和Neat。

他们网站上的例子：

<!-- HTML markup for the section right below this code block -->
<section>
  <aside>What is it about?</aside>
  <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…&lt;/article>
</section>

// Enter Neat
section {
  @include outer-container;
  aside { @include span-columns(3); }
  article { @include span-columns(9); }
}
// And the result is...

正如他们所说：“它完全依赖于 Sass mixins，不会污染您的 HTML”，这似乎是您正在寻找的方式。

于 2013-08-15T13:29:39.580 回答
1

For being new to most of this, you're on the right track; the resources you've been reading are excellent. But, I think the concerns you have might not be justified:

...the button won't get the right style because sass will not apply that same rule to our custom class name...

In fact, I think you must be mistaken. According to the Sass documentation:

@extend works by inserting the extending selector (e.g. .seriousError) anywhere in the stylesheet that the extended selector (.e.g .error) appears.

See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works for the full code example.

Your original solution was actually correct. Use extends, but without the quotes:

.button {
  @extend .btn; //no quotes
}

I tested this using your example, and it works correctly. Sass copies all the selectors with ".btn" and on those newly created selectors, it replaces ".btn" with ".button".

Also, if Sass produces too much duplication for your liking, don't worry about it (so long as you are following best practices as pointed out by the links you posted). Duplicate code is easily compressed if the server uses gzip or the equivalent; the client shouldn't notice any slower loading times, although it might take slightly longer to "unzip" the CSS. As for CSS selector speed, don't worry about that either; the only case where speed matters for selectors is on the JavaScript side, particularly with jQuery. For your Sass code, simply follow best practices for maintainability (notably, modularization as you are trying to do, i.e. SMACSS) and you'll be good to go.

于 2013-11-26T00:34:13.987 回答
1

使用@extend，但不要引用选择器：

.button { @extend .btn; }

然后你会看到 Sass 也扩展了相关的选择器，就像你想要的一样（.form-search .input-append .btn等等）。

…除了每次我们扩展引导类时都会添加的一堆额外选择器，只是为了使用不同的名称…</p>

@extend通过复制选择器来工作。如果你不想这样，你可以在 HTML 中“扩展”——即添加 Bootstrap 的类名。:)

于 2013-10-10T03:28:50.057 回答
0

sam 和 tjklemz 给出的答案将帮助您解决当前的技术挑战，但也可以将您的 CSS 和 HTML 进一步解耦。我将在下面给出一个示例，但请记住，这只是一个演示 mixins/扩展 CSS 类的强大功能的快速示例。

我还强烈建议查看ZURB Foundation 框架，因为它本身就是 SASS，并且在设计时考虑了这种开发风格。

例如：

<body>
    <div id="my-header">
        <h1><a href="#">My Company</a></h1>
        <h2>My Tagline</h2>
    </div>
    <div id="my-main">
        <div class="my-widget">
            <h1>Widget Title</h1>
            <a>Widget Option 1</a>
            <a>Widget Option 2</a> 
        </div>    
    </div>
</body>

使用随附的 SCSS：

//these examples wouldn't really work
//because bootstrap needs more markup
#my-header {
    @extend .navbar;
}
#my-header h1 {
    @extend .branding;
}
#my-main {
    @extend .container;
}

//good example
.my-widget {
    @extend .well;
    @extend .hero-unit;
}
.my-widget a {
    @extend .btn;
}
于 2013-12-10T23:13:01.510 回答