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

21–30 of 71 posts

Re: Using Bootstrap the Semantic Way

#21

Post by marcosdumay »

mradmin wrote: post #10
alxprc wrote: post #5

Earlier quoted context omitted.

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

I have as a rule that if you are in a situation where there can only be 1 element with those properties (it would make no sense at all to have more), I should use the id.

The top elements are one example. It makes no sense to include them inside any other element, and if that ever changes, all the styling will need to change anyway.

Re: Using Bootstrap the Semantic Way

#22

Post by spellboots »

Touche wrote: post #18

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.

> When you can trivially make an element 6 columns in CSS

As demonstrated in the article you can trivially make an element 6 columns in LESS (or SASS, which has a bootstrap port also)

Re: Using Bootstrap the Semantic Way

#23

Post by spellboots »

kh_hk wrote: post #6

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

Alternatively use SASS (and the bootstrap SASS port[1]) which doesn't has this problem, as it instead rewrites selectors.

i.e. if you have:

    .column {
      width: 100px;
      display: inline-block;
    }
And you do:

    .cool-sidebar {
      @extend .column;
    }
Then the generated css will be something like:

    .column, .cool-sidebar {
      width: 100px;
      display: inline-block;
    }
[1] https://github.com/twbs/bootstrap-sass

Re: Using Bootstrap the Semantic Way

#24

Post by Touche »

spellboots wrote: post #22
Touche wrote: post #18

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.

> When you can trivially make an element 6 columns in CSS As demonstrated in the article you can trivially make an element 6 columns in LESS (or SASS, which has a bootstrap port also)

Nicer looking div soup is still div soup. != semantic.

Re: Using Bootstrap the Semantic Way

#25

Post by spellboots »

Touche wrote: post #24
spellboots wrote: post #22

Earlier quoted context omitted.

> When you can trivially make an element 6 columns in CSS As demonstrated in the article you can trivially make an element 6 columns in LESS (or SASS, which has a bootstrap port also)

Nicer looking div soup is still div soup. != semantic.

no, but or are semantic, and there's no reason you couldn't use those instead of by using the features of LESS or SASS.

Re: Using Bootstrap the Semantic Way

#26

Post by mradmin »

marcosdumay wrote: post #21
mradmin wrote: post #10

Earlier quoted context omitted.

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

I have as a rule that if you are in a situation where there can only be 1 element with those properties (it would make no sense at all to have more), I should use the id. The top elements are one example. It makes no sense to include them inside any other element, and if that ever changes, all the styling will need to change anyway.

What if you had a requirement to create variation styles of those elements? How would you do that? Would you add you base style in your id selector, and then variations with classes? Again, you'll face specificity issues with that approach. Keeping things simple is the best approach here IMO. I've done a heck-load of CSS and have seen how hacky a stylesheet can become because of specificity issues. Sticking with classes and keeping selectors short will make your stylesheet easier to follow and more maintainable, but this is just my approach!

Re: Using Bootstrap the Semantic Way

#27

Post by tragic »

marcosdumay wrote: post #21
mradmin wrote: post #10

Earlier quoted context omitted.

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

I have as a rule that if you are in a situation where there can only be 1 element with those properties (it would make no sense at all to have more), I should use the id. The top elements are one example. It makes no sense to include them inside any other element, and if that ever changes, all the styling will need to change anyway.

> I have as a rule that if you are in a situation where there can only be 1 element with those properties (it would make no sense at all to have more), I should use the id.

Not a good idea: IDs take massive priority over classes in the cascade.

As someone who often has to override an enormous stylesheet which is all styled to IDs, this is a serious pain point.

Simple example: http://jsfiddle.net/B7tSz/

Re: Using Bootstrap the Semantic Way

#28

Post by allendoerfer »

jey wrote: post #15
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…

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.

Re: Using Bootstrap the Semantic Way

#29

Post by moretti »

spellboots wrote: post #23
kh_hk wrote: post #6

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

Alternatively use SASS (and the bootstrap SASS port[1]) which doesn't has this problem, as it instead rewrites selectors. i.e. if you have: .column { width: 100px; display: inline-block; } And you do: .cool-sidebar { @extend .column; } Then the generated css will be something like: .column, .cool-sidebar { width: 100px; display: inline-block; } [1] https://github.com/twbs/bootstrap-sass

Less has the same feature: http://lesscss.org/features/#extend-feature

Re: Using Bootstrap the Semantic Way

#30

Post by mikewhy »

spellboots wrote: post #23
kh_hk wrote: post #6

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

Alternatively use SASS (and the bootstrap SASS port[1]) which doesn't has this problem, as it instead rewrites selectors. i.e. if you have: .column { width: 100px; display: inline-block; } And you do: .cool-sidebar { @extend .column; } Then the generated css will be something like: .column, .cool-sidebar { width: 100px; display: inline-block; } [1] https://github.com/twbs/bootstrap-sass

a rule of thumb I've been following when using Sass/LESS: If your mixin doesn't take arguments, you probably want `@extend`
Post reply on HN