Lessons learned in maintainable css
Please stop embedding Bootstrap classes in your HTML
很明显,为什么这不是正确的为什么要使用bootstrap,所以经过一些更多的阅读:
除此之外,似乎使用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; }
所以我想知道,这是避免将bootstrap的类名嵌入到HTML中的正确方法,如果是这样,我应该如何处理这个问题(经常发生)?如果没有,那么使用自定义类名的更好方法是什么,但是仍然可以从引导获取样式。
我非常感谢你的想法。请记住,我正在学习整体网页设计(css,sass,less,html,js等)。
解决方法
在这种情况下,您上述示例中的sass代码应该是:
.form-searchnew .input-appendnew .button { extend(.form-search .input-append .btn); }
这是有道理的(我不知道sass),并导致您期望的CSS。
我认为bootstrap不是关于css。 Bootstrap是关于css,html(结构)和javascript。即使您将CSS从html中分离,我也不会轻易迁移到另一个框架。除了css之外,您还必须更改html结构和javascript调用。
示例从Twitter的Bootstrap 2迁移到3(见:Updating Bootstrap to version 3 – what do I have to do?)。我也想知道你是否可以通过将旧类扩展到新的css来迁移(参见:http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/)。看完migration guide后,我想你不行。
其他解决方案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…</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”,这似乎是您要寻找的方式。