17

I keep bumping into this issue where everyone keeps: a) wanting to wrap HTML5 semantic tags with divs, and b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.

For example, I am constantly told that this is "incorrect",

<body class="container">
    <header class="row">
        <div class="col-md-12"> ...

And something like this is more preferable,

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

And here, where the first example I have the column class in the h2 tag 

    <div class="row">
        <h2 class="col-4 feature">Featured Work</h2>
    </div>

But "the correct" way is to add yet another div tag to apply the class,

    <div class="row">
        <div class="col-4 feature">
            <h2>Featured Work</h2>
        </div>
    </div>

I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.

halfer
  • 19,824
  • 17
  • 99
  • 186
Padawan
  • 724
  • 1
  • 8
  • 20
  • 1
    You are correct opinion is not what stackoverflow is for. All of your examples are perfectly correct. Use one style and stick to it. – Ryan Jan 14 '15 at 20:29
  • 1
    This is very much so an opinionated question, but I would recommend sticking to what the documentation says. Applying `container` to body doesn't make sense to me, but if it works for your needs, go for it. – Tim Lewis Jan 14 '15 at 20:36
  • And yet, I am confused as to the invalidity of opinion questions. I understand SO doesn't want random, unsubstantiated opinions, but why is it that the elders of the internet here think that beginners don't learn from the opinions of others?? The very fact that you guys answered my question has helped my knowledge base. The fact that I could get the answers nowhere else just reinforces "my opinion." And, the fact that you say "Applying container to body doesn't make sense to me" causes me to ask why, since I wish to learn, but am already hamstrung because this is all an "opinion." – Padawan Jan 14 '15 at 20:43
  • 1
    There is nothing wrong in applying CSS classes to HTML tags. You can do it if your code needs it although I can't comprehend why it would be important for the design to need this. Also, with respect to the so-called "correct" way, why would you specifically insert div tags only to apply CSS? Either ways, it's more of a matter of preference and most of the answers you'd find will be more of opinions rather than "best practices". – Satwik Nadkarny Jan 14 '15 at 20:45
  • @SatwikNadkarny - "why would you specifically insert div tags only to apply CSS?" Precisely my question!! This is at the heart of my confusion and in order for me to get educated on this matter, I have to hear the opinions of others, which is faux pas here. Though, I'm confused that you ask this question but still said "There is nothing wrong in applying CSS classes to HTML tags. You can do it if your code needs it although I can't comprehend why it would be important for the design to need this." Aren't your two statements contradictory of each other? – Padawan Jan 14 '15 at 20:50
  • 1
    @Padawan Exactly, they are meant to be contradictory!! The reason that it is contradictory is because "You can do it if your code needs it" and "I can't comprehend why it would be important for the design to need this" are mere opinions which are not supported by any technical reasoning but rather by a personal preference. In other words, both the contradictory statements do not provide or even try to provide any technical arguments. Hence, any answers would reek of opinions and not any technical reasons or best practices. – Satwik Nadkarny Jan 14 '15 at 21:00
  • @SatwikNadkarny ...I see...What is unfortunate is that, I believe those of you who are knowledgable in coding have forgotten what it is like to learn from the beginning. How do you think those of us can even get to the point of having a perpetual stream of questions answered when over half are cut off from the start because they are "opinion based?" To even get to this point, to learn what you guys have said, legitimizes my question. In order for me to realize that "it is a matter of preference," I had to ask & it had to be answered. How else could I have learned this? ...*shakes head* – Padawan Jan 14 '15 at 21:10
  • 1
    @Padawan Well, for starters, you know very well that both the methods work in terms of producing the output. All you needed to know was which is the "better way" of doing it. Well, the answer is that there is none, but if you are more interested in getting opinions, then the exact nature of your question (in terms of snippet) could be better served on one of our other sites - http://codereview.stackexchange.com/ – Satwik Nadkarny Jan 14 '15 at 21:16
  • 1
    I think where I have followed the docs while learning bootstrap I have stuck to the div option. It does get annoying at times creating divs that would not be required if not using bootstrap. If it works and is consistent then go for it. Although I always feel unsure straying from the docs unless I have to. It a bit like a hack or at least feels like – Creaven Jan 14 '15 at 21:37
  • Amazing how these opinion questions continue to educate. "Thanks for your comment. I couldn't find any explanations on what was the "better" of the two" http://stackoverflow.com/questions/27599396/flexbox-vs-twitter-bootstrap-or-similar-framework – Padawan Jan 16 '15 at 03:45
  • Technically it does limit your doc to one type of container. Bs containers cannot be nested (https://getbootstrap.com/docs/3.3/css/#overview-container) Setting the body as one of the two types (container / container-fluid) prevents you from supporting both types of containers in the same document, whereas otherwise they could peacefully co-exist side-by-side (or as alternatives). I've done body containers, with temp content in a "preview" iframe, but I also have a script that injects a toolbar into the body of a page; and there I need to trust that that page's body is not a container. – Tolerance72 Oct 02 '17 at 10:18

1 Answers1

10

I recommend sticking to the

<body>
   <div class="container">
      <div class="row">
          <div class="col-md-12"> ...

format.

If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.

Since we are talking about markup there is no right answer, but following this convention is strongly recommended.

  1. For consistency
  2. For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).

However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.

FredTheWebGuy
  • 2,546
  • 3
  • 27
  • 34