Hacker News Reader

Comment by k__ | Hacker News Reader

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.

View on HN

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.

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.

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

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.

Same here.

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

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.

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);
    }

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

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.

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.

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

That's exactly why I used Bourbon over Bootstrap.

http://bourbon.io/

Reply on news.ycombinator.com