[matt4077]

I feel like bootstrap has become the jquery of css themes. People will launch into a lecture on "separation of concerns" when they see a style attribute in html or a ruby loop in an .erb template. Yet they litter their code with class="col-xs-4" without a second thought.

[k__]

I heard it can be used differently.

Select your elements with SASS and let this selector inherit the style of a Bootstrap class.

    body > div > div {
      @extend .col-xs-4;
    }

But I never tried to use it that way.

[damptowel]

As someone who did a couple of front end jobs both building and fixing css built in this way I can give you one advice: don't.

This might seem like an obvious thing to generate cleaner and more 'semantic' markup but you will end up with tight coupling all over the place. When you change anything in your layout you'll need to rewrite parts of your css, which is basically twice the effort. You'll just end up wasting your employers time and money.

If you want some deeper insight into why it's considered a bad philosophy, I highly recommend reading some articles by Harry Roberts.

Then again, some succesful professionals actually work this way, I know a few.

[scarecrowbob]

Well, typically it's more like:

.home { .twitter-area { @include grid-column(4); } }

But personally I find that to be much more of a pain in the butt to come back to a couple of months later than just applying the column classes directly to elements.

[usaphp]

And then in case you want to change element size you will have to go through all the elements that were generated in the backend where you applied inline style and change that manually for each of them? You either have never worked with big CSS projects or I am just not understanding what you mean, applying inline styles directly to elements will cause a maintenance havoc in my opinion

[scarecrowbob]

Hey, that's totally your opinion, and when you pay me, that's what I'll do.

I don't recall saying anything about inline css though. To be specific, I'm saying that I prefer to have the column classes directly applied to the elements as opposed to using sass to include the column css to the semantic CSS classes of the elements.

I dunno what that has to do with applying a style attribute directly inline to an element.

I'll tell you what doe bug me, when I change the number of columns on my project, becasue that is coded directly into the elements, but honestly I've never had to do that very far into any project.

[k__]

Same here.

But it somehow hurts to look at the markup later, with all the classes, etc.

[scarecrowbob]

Yeah, that can be annoying to look at 5 or 6 classes-- it's certainly not semantic and it can be quite a pile. I use foundation and I feel like the class names are more aesthetically pleasing, but that's a really minor concern :D

But practically I find that it's less difficult to make layout changes this way-- I can just cut sections and paste them somewhere else and I don't have to look elsewhere for their actual layout rules. I find it much more difficult to untangle the grid system when I can look at the classes directly on the elements.

I say this having had to do it even for my own code quite a bit... I just find it a little more difficult to think out when I don't have the columns listed on the elements themselves.

[antidaily]

I do. It's great. It's the best grid IMO. Here's all you need:

  @import 'bootstrap/variables';
  @import 'bootstrap/normalize';
  @import "bootstrap/mixins/clearfix";
  @import "bootstrap/mixins/grid";
  @import "bootstrap/mixins/grid-framework";

and then you can insert it:

    article {
        @include make-sm-column(5);
        @include make-sm-column-offset(1);
        @include make-xs-column(6);
    }

[lorddoig]

I (try) to use it this way wherever practicable. There are caveats and gotchas but in general it works as expected.

[k__]

Nice to know.

I just found it faster to add the classes directly to the HTML.

But I will check how this would work with Babel+WebPack+React in the future.

I can import SASS files in JS, but they would have to be merged with the Bootstrap SASS etc.

[pointytrees]

I also find it faster when a coworker requests I shift an image down, to add style="position:relative;top:10px;" to adjust an image or div down a few pixels, than to find the style sheet (one of dozens nestled in various locations) and add it where it belongs.

[scarecrowbob]

See, although I can understand that impulse, if I'm working with anything that I'm ever going to look at again, inline styling is something that I won't do. If it works for you do, it but I hate messing with it :D

[mbesto]

That's exactly why I used Bourbon over Bootstrap.

http://bourbon.io/

[encoderer]

HTML is markup and that class name is a declarative way of saying "this is 4 columns wide on phone sized screens".

I don't see the problem.

[ThomPete]

Whats the problem with that? Honest question.

[blaze33]

From what I recall css class names should be semantic because they're in the html code and should relate to the content and not to its current presentation. So class="col-xs-4" is unsemantic.

Just searched for "semantic name" and found this article from 2011 that explain the subject quite well: https://css-tricks.com/semantic-class-names/

[ThomPete]

Couldn't that be changed in the Bootstrap source code easily?

[bdavisx]

No, because they (the bootstrap people) can't know what your semantics are for the particular piece of HTML you are marking up. You might want to use 4 columns for a certain type of information in one place (Employee Data) and 4 columns for a different type of information in another place (Sales Figures) - the implementation of both is 4 columns, but the semantics would be "Employee Data" or "Sales Figures".