Using Bootstrap the Semantic Way
ostraining.com
Using Bootstrap the Semantic Way
1–10 of 71 posts
Re: Using Bootstrap the Semantic Way
#2I think this would be more semantic (with or without the classes)
Re: Using Bootstrap the Semantic Way
#3The 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.
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.
Not going to waste my time and wrap bootstrap mixins in more LESS mixins and loose theme portability and modularity,because semantics...
It's like inobstrusive javascript, trends that make little sense today in the webapp era.
Re: Using Bootstrap the Semantic Way
#4What 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?
Re: Using Bootstrap the Semantic Way
#5I think this would be more semantic (with or without the classes)
Sure, but what if you have more than another section that should be styled differently? Classes can help differentiate same-name elements with different contexts, so you don't need unwieldy structure-specific CSS selectors like
main > section > main
main.semantic-classRe: Using Bootstrap the Semantic Way
#6Be 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).
Re: Using Bootstrap the Semantic Way
#7The 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. 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. No…
You will start caring the day you want to update to Bootstrap 9000 and need to change the class names of all the properties that have changed. A counterargument could be that one could stick with the version already deployed, and that's fine too I guess.
For me it's about being in control of the situation. I will find myself changing things just for them to look as they are supposed to look like, and soon realizing that is not CSS anymore, just another framework being in between and making the work sometimes easier and sometimes harder. Using LESS at least gives you a bit more of control on the hidden spots, and opens room for sane customization.
I do personally prefer to not use a CSS framework at all, but if Bootstrap is a requisite on a project, using LESS is a no brainer.
Re: Using Bootstrap the Semantic Way
#8Re: Using Bootstrap the Semantic Way
#9I appreciate the comparison to the ancient Web, but this article doesn't say much more that I can't find in Bootstrap's documentation.
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:
* How do you build semantic forms with Bootstrap without going to markup fluff hell?
* How can you avoid the unsemantic class names for components that are tied too closely with child components (I'm looking at you, .panel)?
* What is the semantic purpose of a row element? It seems purely presentational to me.
* How do I add icons without peppering span.glyphicon.glyphicon-X's all over my markup?
* 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.
* Are there any optimizations I can consider when I'm only using a bit of Bootstrap's functionality?
* How can I extend Bootstrap's mixins for my own needs?
Re: Using Bootstrap the Semantic Way
#10I think this would be more semantic (with or without the classes)
Sure, but what if you have more than another section that should be styled differently? Classes can help differentiate same-name elements with different contexts, so you don't need unwieldy structure-specific CSS selectors like main > section > main just main.semantic-class
You'll also get major specificity issues when using element selectors with other class/id type selectors. My rule of thumb is classes and only classes for styling, it really makes life a lot easier. (Even if you have a unique element on the page, don't use the ID in your selector to style it.)