Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Using Bootstrap the Semantic Way

ostraining.com

Post reply on HN
Print view View original

61–70 of 71 posts

Re: Using Bootstrap the Semantic Way

#61

Post by woah »

awhitty wrote: post #9

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. 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 c…

questions 1-4: "Semantic" css is a waste of time. Either you're putting information into the html or you're putting it in the css. Use what works well.

question 5: I'll usually put bootstrap into its own folder, have a style.less outside of the folder that imports bootstrap.less, import stylesheets with custom mixins after bootstrap.less, and import straight up custom styles after that.

question 6: go into bootstrap.less and comment out the stuff you're not using. For the js, use something like gulp-include to concatenate.'

question 7: Load my-mixins.less after bootstrap.less, copy and paste mixins from bootstrap into there, and modify them.

Re: Using Bootstrap the Semantic Way

#62

Post by woah »

bliker wrote: post #2

I think this would be more semantic (with or without the classes)

This deeply nested descendent selector stuff is a terrible idea. It's the css equivalent of jquery dom traversal spaghetti. Don't overthink things. Css should be good enough, and no better.

Re: Using Bootstrap the Semantic Way

#63

Post by woah »

ryanbrunner wrote: post #49
vinceguidry wrote: post #47

Earlier quoted context omitted.

> People are getting things done with Bootstrap every day. That is not an argument for correctness of approach. If there arose a cult of builders who decided to pour foundations with wheelbarrows and bags of concrete rather than a mixer, I'd tell them they're doing it wrong no matter how many houses they built this way.

The problem is that you can demonstrably point out objective flaws with using wheelbarrows and bags of concrete (or I assume you can - I know nothing about pouring foundations). With the cult of semantic HTML, the flaws in using class names to describe presentation are almost always not explained beyond some vague notion of "correctness", and possibly an example that bears to relation to reality when you take into ac…

The problem with using wheelbarrows is that it will take a really really long time to get anything done.

"Semantic" css is like a cult of builders who sort the stones in their concrete by hand, and will only use the bluish stones for the foundation and the reddish stones for stairs. You point out to them that it simply doesn't matter, and they are shocked that you're not doing things the "right" way.

Re: Using Bootstrap the Semantic Way

#64

Post by jey »

allendoerfer wrote: post #28
jey wrote: post #15

Earlier quoted context omitted.

This sounds exactly like the complaints lodged against structured programming[1] by traditional GOTO-based programmers. 1. https://en.wikipedia.org/wiki/Structured_programming

Except, that the idea of semantic web is the traditional approach, whereas composable cross-browser classes controlled with LESS variables is the new and more pragmatic approach.

Sounds like you're confusing Semantic HTML with Semantic Web. "Semantic" HTML is a style of writing HTML where the document exposes the meaningful structure and data in the document instead of the visual layout. The idea is that HTML is just a structured data representation, a la XML, and CSS is then used to transform it into a particular layout.

https://en.wikipedia.org/wiki/Semantic_HTML

Re: Using Bootstrap the Semantic Way

#65

Post by dimal »

camus2 wrote: post #3

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. 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…

Perhaps the term "semantic" is overloaded, but there are good reasons why presentational classnames are bad, even though users don't care and machines don't care. Your fellow developers should care. When done well, semantic markup is much easier to maintain and reason about. There's far less duplicated template logic and design changes are much easier because it's easier to understand where your changes will have an effect. The generated CSS might be slightly heavier, but possibly not. Poorly architected CSS tends to get very bloated and heavy very quickly. And there are better preprocessors like Sass or Stylus give you more options for keeping you generated CSS to a minimum. Less is really the worst preprocessor out there.

Every non-semantic bootstrap site I've seen has far more templates than would be necessary the templates only spit out minimal markup with classes that say what each element is instead of what it looks like.

But now we have tons of developers whose primary skill is backend development that are able to mash together a reasonable looking site without understanding how to create maintainable front end code. When the design changes, they just keep piling on more markup and more classes. This works for a while, but as designs get iteratively tweaked and changed, and kludges pile on top of kludges, the markup and CSS become a huge tangled mess. Making changes can have unpredictable effects on other parts of the site.

And then the back end developers throw up their hands and say, "CSS is stupid." But users don't care if the code is a mess, right? Machines don't care either. But the front end dev -- the one who's tasked with getting the new design to work without breaking anything else on the site -- he cares. And he's gonna have a bad time.

Re: Using Bootstrap the Semantic Way

#66

Post by mgr86 »

droob wrote: post #36

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.

I was at Balisage this summer, a markup conference (XML). The opening talk was on semantics. The summary basically read, what the hell does this word even mean anyway.

(paper - http://www.balisage.net/Proceedings/vol10/html/Usdin01/Balis...)

Re: Using Bootstrap the Semantic Way

#67

Post by ssorallen »

cheriot wrote: post #59

This increases the number of css styles dramatically, which affects page speed on large sites.

Nicolas Gallagher addresses and deflects this point specifically with real numbers: http://nicolasgallagher.com/about-html-semantics-front-end-a... The link came from an earlier poster. Once you compress the HTML, the savings are insignificant compared to the likely 10s or 100s of kilobytes of images and JavaScript on a modern web page. Given how tiny the savings are, there are other places more worth your time to save bytes.

Re: Using Bootstrap the Semantic Way

#68

Post by allendoerfer »

jey wrote: post #64
allendoerfer wrote: post #28

Earlier quoted context omitted.

Except, that the idea of semantic web is the traditional approach, whereas composable cross-browser classes controlled with LESS variables is the new and more pragmatic approach.

Sounds like you're confusing Semantic HTML with Semantic Web. "Semantic" HTML is a style of writing HTML where the document exposes the meaningful structure and data in the document instead of the visual layout . The idea is that HTML is just a structured data representation, a la XML, and CSS is then used to transform it into a particular layout. https://en.wikipedia.org/wiki/Semantic_HTML

You are right, I meant to write "HTML". Nevertheless I question the usefulness of this approach. Semantic XML vs. pragmatic JSON tells a similar story.

Semantic structures are never perfect, because they are not controlled by the recipient, but by the sender. I love the idea, but I think it will never come true. We will always have to mine the data ourselves.

I can see the value of providing semantic markup for screen readers or for some Google SERP extension, but I do not see how semantic class names provide any value at all.

Separation of concerns is a nice saying, but as other comments already mentioned, is just not possible to the full extend yet as CSS and browsers are to limited.

I think we should acknowledge these shortcomings and real world circumstance, do our best to work around them, but in the end just move on and be productive.

Re: Using Bootstrap the Semantic Way

#69

Post by dsego »

kh_hk wrote: post #42
dsego wrote: post #16

Earlier quoted context omitted.

Bootstrap already depends on the markup structure, which makes your point moot.

I do not really get your point, care to elaborate? Unless you mean that 'div' is subject to change over time…

A span2 div needs to reside in a row or row-fluid div for it to make sense. You can create your own classes that inherit from these, but you still need to nest them. Which means you can't change the structure of the markup willy-nilly. Thus, not using boostrap classes won't get you far.

Re: Using Bootstrap the Semantic Way

#70

Post by grakic »

grakic wrote: post #4

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?

I got this recommended for handling shared rules: http://zmoazeni.github.io/csscss/
Post reply on HN