5 ms·

I used to be firmly in the "don't use bootstrap" semantic css camp, but now that Bootstrap 3 is out, I no longer see the point. It's a pain to have to think of

by woah 13y ago

I used to be firmly in the "don't use bootstrap" semantic css camp, but now that Bootstrap 3 is out, I no longer see the point. It's a pain to have to think of all the specific class names for things, and the end user doesn't care anyway.I'm not sure what the actual real world benefits of semantic css are, and I have wasted a huge amount of time in the past coming up with my own stylesheets that end up being worse versions of Bootstrap anyway. The only place that Bootstrap really "traps" you is in the presentational grid class names, but you'll get this with any grid, and the Bootstrap grid is pretty solid (I have invested a large amount of time designing my own grid systems in the past). The biggest benefit of Bootstrap that I see is that it enforces a sensible naming convention, so that someone who has not read through your quirky "semantic" 3000 line stylesheet can easily get to work on the site. The custom stylesheet (and the variables stylesheet) that you load after Bootstrap will tend to only be a few hundred lines, and contain only the things that make your site unique. I have several large sites that I made before I used Bootstrap for everything and I constantly kick myself when I've got to dig in and maintain them. If you are a good designer and take pride in your work, nobody will be able to know that you used Bootstrap without opening the inspector.

maaku 13y ago
Upvoted for truth, but TFA goes a long way towards minimizing the difficulty of creating and maintaining a semantic solution. I've been turned away from semantic css by simple pragmatic efficiency, but this solution might be worth trying out.
- igravious 13y ago
  Yes, but then you've added SASS to the mix. If you stay in Bootstrap-land you're at CSS level still. Or am I wrong? I want to stay at HTML/CSS/JS level. I don't want layers and layers and layers. Even using Ruby templates (if I'm using Ruby for instance) irks me. Maybe I'm weird. But I'm only a semi-professional web dev at this stage so my 2c may be worth les than your 2c :)
  - KurtMueller 13y ago
    Bootstrap was made in LESS.
  - maaku 13y ago
    Bootstrap is a black box: I don't really care what it was implemented in (LESS as someone else pointed out). I include bootstrap.min.js, and then customize it as necessary in my SASS file, compiled during deployment to CSS. No conflict here.
  - woah 13y ago
    I use bootstrap-stylus, because Stylus is what I like. I load one custom.styl after the bootstrap files, and modify bootstrap's variables.styl.
- jrochkind1 13y ago
  What does "TFA" mean?
  - gvb 13y ago
    The Fine Article. http://www.urbandictionary.com/define.php?term=TFA http://www.urbandictionary.com/define.php?term=TFA
deleted 13y ago
[deleted]
wdewind 13y ago
As far as grid layouts go, bootstrap's is fine. The main argument against grid layouts is that they incorrectly couple two things: 1) Content and presentation (by having the HTML actually include layout information). 2) Various classes that use the grid classes (which have no reason to be coupled). It's difficult, because standard CSS doesn't give us a great way of solving the problem. If you are going to move the descriptions of layout into the CSS, where they belong, then there will be a lot of repetition without variables/classes that things like SASS give you. In my opinion you are far better off by at least separating the concerns and having a bit of repetition in your CSS rather than using a grid system in your HTML, should you be using standard CSS.
- IgorPartola 13y ago
  To be fair, you cannot design a useful grid system where the HTML is void of layout info. I mean, sure you can do something like this: <div class="features> <div class="feature">...</div> <div class="feature">...</div> <div class="feature">...</div> </div> But the problem with the above is that you can't easily distinguish between the three features. They are all the same, unless you do some type of "first feature is 2x the size". So you end up with code like this instead: <div class="features> <div class="feature feature-primary">...</div> <div class="feature feature-two-images feature-narrow">...</div> <div class="feature feature-last-no-thumbnail feature-small hide-on-mobile">...</div> </div> There isn't really anything semantic about the added stuff (except maybe the feature-primary class). You end up trading off between custom class names for every use case (ephemeral-photographic-feature) with all types of custom rules, or you end up saying "screw it, I'll just have semi-semantic markup that directly affects layout". I am also starting to think that at some point semantic markup starts benefiting search engines much more than anyone else. After all the average user with credit card in hand has no idea if the credit card field has a class of "FormFieldCCNum__1" or "credit-card". The developer does, and that's who these tools should be optimized for.
  - wdewind 13y ago
    I agree with your post, but I think you only address half of the issue: the other half is the incorrect coupling. In terms of maintainability it does not make sense to have a bunch of random things with a class of "narrow" because then you can't predictably change the "narrow" class. It's really hard though, and I don't see a clear answer using CSS without some kind of OO addon (less, sass etc.)

by woah 13y ago

maaku 13y ago

Upvoted for truth, but TFA goes a long way towards minimizing the difficulty of creating and maintaining a semantic solution. I've been turned away from semantic css by simple pragmatic efficiency, but this solution might be worth trying out.

igravious 13y ago
Yes, but then you've added SASS to the mix. If you stay in Bootstrap-land you're at CSS level still. Or am I wrong? I want to stay at HTML/CSS/JS level. I don't want layers and layers and layers. Even using Ruby templates (if I'm using Ruby for instance) irks me. Maybe I'm weird. But I'm only a semi-professional web dev at this stage so my 2c may be worth les than your 2c :)
- KurtMueller 13y ago
  Bootstrap was made in LESS.
- maaku 13y ago
  Bootstrap is a black box: I don't really care what it was implemented in (LESS as someone else pointed out). I include bootstrap.min.js, and then customize it as necessary in my SASS file, compiled during deployment to CSS. No conflict here.
- woah 13y ago
  I use bootstrap-stylus, because Stylus is what I like. I load one custom.styl after the bootstrap files, and modify bootstrap's variables.styl.
jrochkind1 13y ago
What does "TFA" mean?
- gvb 13y ago
  The Fine Article. http://www.urbandictionary.com/define.php?term=TFA http://www.urbandictionary.com/define.php?term=TFA

deleted 13y ago

[deleted]

wdewind 13y ago

As far as grid layouts go, bootstrap's is fine. The main argument against grid layouts is that they incorrectly couple two things: 1) Content and presentation (by having the HTML actually include layout information). 2) Various classes that use the grid classes (which have no reason to be coupled). It's difficult, because standard CSS doesn't give us a great way of solving the problem. If you are going to move the descriptions of layout into the CSS, where they belong, then there will be a lot of repetition without variables/classes that things like SASS give you. In my opinion you are far better off by at least separating the concerns and having a bit of repetition in your CSS rather than using a grid system in your HTML, should you be using standard CSS.

IgorPartola 13y ago
To be fair, you cannot design a useful grid system where the HTML is void of layout info. I mean, sure you can do something like this: <div class="features> <div class="feature">...</div> <div class="feature">...</div> <div class="feature">...</div> </div> But the problem with the above is that you can't easily distinguish between the three features. They are all the same, unless you do some type of "first feature is 2x the size". So you end up with code like this instead: <div class="features> <div class="feature feature-primary">...</div> <div class="feature feature-two-images feature-narrow">...</div> <div class="feature feature-last-no-thumbnail feature-small hide-on-mobile">...</div> </div> There isn't really anything semantic about the added stuff (except maybe the feature-primary class). You end up trading off between custom class names for every use case (ephemeral-photographic-feature) with all types of custom rules, or you end up saying "screw it, I'll just have semi-semantic markup that directly affects layout". I am also starting to think that at some point semantic markup starts benefiting search engines much more than anyone else. After all the average user with credit card in hand has no idea if the credit card field has a class of "FormFieldCCNum__1" or "credit-card". The developer does, and that's who these tools should be optimized for.
- wdewind 13y ago
  I agree with your post, but I think you only address half of the issue: the other half is the incorrect coupling. In terms of maintainability it does not make sense to have a bunch of random things with a class of "narrow" because then you can't predictably change the "narrow" class. It's really hard though, and I don't see a clear answer using CSS without some kind of OO addon (less, sass etc.)