5 ms·

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

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.

ThomPete 11y ago
Whats the problem with that? Honest question.
- blaze33 11y ago
  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/ https://css-tricks.com/semantic-class-names/
  - deleted 11y ago
    [deleted]
  - ThomPete 11y ago
    Couldn't that be changed in the Bootstrap source code easily?
    - bdavisx 11y ago
      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".
k__ 11y ago
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.
- lorddoig 11y ago
  I (try) to use it this way wherever practicable. There are caveats and gotchas but in general it works as expected.
  - k__ 11y ago
    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 11y ago
      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 11y ago
        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
- scarecrowbob 11y ago
  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.
encoderer 11y ago
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.
deleted 11y ago
[deleted]

ThomPete 11y ago

Whats the problem with that? Honest question.

blaze33 11y ago
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/ https://css-tricks.com/semantic-class-names/
- deleted 11y ago
  [deleted]
- ThomPete 11y ago
  Couldn't that be changed in the Bootstrap source code easily?
  - bdavisx 11y ago
    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".

k__ 11y ago

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.

lorddoig 11y ago
I (try) to use it this way wherever practicable. There are caveats and gotchas but in general it works as expected.
- k__ 11y ago
  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 11y ago
    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 11y ago
      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
scarecrowbob 11y ago
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.

encoderer 11y ago

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.

deleted 11y ago

[deleted]