Still the most comprehensive rebuttal to this common (and I feel, badly mistaken) complaint:<p><i>"About HTML semantics and front-end architecture"</i> (from March 2012):<p><a href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/" rel="nofollow">http://nicolasgallagher.com/about-html-semantics-front-end-a...</a><p>It's all well worth reading, but the conclusion is particularly to the point:<p><i>"The experience of many skilled developers, over many years, has led to a shift in how large-scale website and applications are developed. Despite this, for individuals weaned on an ideology where “semantic HTML” means using content-derived class names (and even then, only as a last resort), it usually requires you to work on a large application before you can become acutely aware of the impractical nature of that approach. You have to be prepared to disgard old ideas, look at alternatives, and even revisit ways that you may have previously dismissed.<p>...<p>When you choose to author HTML and CSS in a way that seeks to reduce the amount of time you spend writing and editing CSS, it involves accepting that you must instead spend more time changing HTML classes on elements if you want to change their styles. This turns out to be fairly practical, both for front-end and back-end developers – anyone can rearrange pre-built “lego blocks”; it turns out that no one can perform CSS-alchemy."</i>
We need a better word for this than "semantic". We're just passing the complexity back and forth between the HTML and the CSS, and the only "semantics" or meaning that arise are to the author/editor. Users don't care, machines don't care, and I've never, ever seen a large-scale site design that doesn't involve some reworking of both the HTML and the CSS.
The point of using bootstrap is a reusable set of classes. I really dont care wether class names are semantic or not,it doesnt change anything,except for pedantic people looking at your source code.<p>SEO doesnt care , users dont care, accessibility doesnt care either. Using new HTML5 tags is good enough and was designed for that specific purpose. If i want semantics I use nav,aside,section instead of div,and so on.<p>Not going to waste my time and wrap bootstrap mixins in more LESS mixins and loose theme portability and modularity,because semantics...<p>It's like inobstrusive javascript, trends that make little sense today in the webapp era.
I appreciate the comparison to the ancient Web, but this article doesn't say much more that I can't find in Bootstrap's documentation.<p>Anyone who has used Bootstrap's mixins with semantics in mind knows there are some bigger issues to address than the layout. Some questions off the top of my head:<p>* How do you build semantic forms with Bootstrap without going to markup fluff hell?<p>* How can you avoid the unsemantic class names for components that are tied too closely with child components (I'm looking at you, .panel)?<p>* What is the semantic purpose of a row element? It seems purely presentational to me.<p>* How do I add icons without peppering span.glyphicon.glyphicon-X's all over my markup?<p>* How should I organize/maintain all of my LESS files as my stylesheets scale? I'm not looking for any one "right" way, but suggestions are always nice.<p>* Are there any optimizations I can consider when I'm only using a bit of Bootstrap's functionality?<p>* How can I extend Bootstrap's mixins for my own needs?
I think this would be more semantic (with or without the classes)<p><pre><code> <section>
<main> </main>
<aside> </aside>
<section></code></pre>
We do div soup because CSS is still not good enough to do all of your styling there. When you can trivially make an element 6 columns in CSS we'll all stop treating Bootstrap like this. Maybe Flexbox version 6 (or whatever we are on now) finally fixes this but who can keep up and find out.
Be very wary, though, if you are using mixins to define these columns in a case-by-case basis, as this could lead to huge generated CSS (the properties of the column will be defined in each class the mixin has been used).
I build web "apps". I don't treat HTML and CSS like a semantic document; it's just a declarative layout engine. Yes, I often use HTML elements and structure to define layout instead of CSS classes. My CSS class names often have little "semantic" meaning outside their single purpose, that is to define layout and style. Am I doing something wrong? We don't have these discussions when building native GUIs.<p>Perhaps if I were building a CMS or some other document-oriented site I would approach things differently.
Here is a LESS mixin that will go a long way in making semantic Bootstrap easy to actually do:<p>.make-column(@large, @medium, @small, @tiny: 12) {
.make-xs-column(@tiny);
.make-sm-column(@small);
.make-md-column(@medium);
.make-lg-column(@large);
}<p>Then use it with:
section#main-content { .make-column(8,8,9,12); }
I've used Bootstrap and been forced to use it on existing projects already engulfed in it. It isn't pretty on a large project. I've sworn off using Bootstrap in any new project that isn't a prototype for a hack day. The only things I borrow from Boostrap these days are some of the JavaScript niceties like modal, tooltip, and scrollspy. And when I do that I'm very explicit in what code I pull in to use those.<p>Build the CSS for your next project using mixin libraries like Bourbon/Neat or Compass/Susy. You'll be glad you did.
This is one of the main reasons I like AngularJS directives. If used properly (huge caveat) they allow your template markup to take on far more semantic meaning.<p>I also agree with the idea that we should use Mixins to allow for more semantic meaning in our plain HTML. As an added bonus, this can make things a lot more maintainable down the road.
One of the strengths of BS is mobile-first responsive design. You can chain classes like this: class-name="col-xs-6 col-md-3"<p>If you try this with the method outlined by the OP, you'll end up with a giant css file.
What are current options to optimize LESS files and remove unused mixins? And for the generated CSS, what are current options to merge shared rules and remove unused classes reported against a sample HTML?