Same id on body tag for greater css specificity

Question

I don't want to use !important or write new rule for every case which can handle with helper classes. For example I want to do it;

HTML

<body id="sameId">
    <div class="wrapper">
        <div class="article text-center text-bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

        <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

        <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

        <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

        <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

        <div class="article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</body>

CSS

/* Helper Classes */
#sameId .text-center {
    text-align:center;
}

#sameId  .text-bold {
  font-weight: bold;
}


/* Article Styles */
.wrapper .article {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    text-align:left;
    font-weight: normal;
}

Does causes a problem in the future using same id on body tags of all pages for greater css specificity?

https://jsbin.com/tamaxetuse/1/edit?html,css,output

Is there a reason why you explicitly set `text-align` and `font-weight` in `.wrapper .article`? If they aren't overwritten by another rule earlier in your CSS you can simply [omit them](http://jsfiddle.net/8uedncgm/). — insertusernamehere, Oct 27 '15 at 09:03

score 0 · Answer 1 · answered Oct 27 '15 at 09:11

If you are using helper classes like that you can just as well use !important in them or write the style directly in the HTML tag. They are just a substitute for inline styles, so you haven't really separated the content from the styling.

CSS rules should preferably reflect what it is that you want to convey rather than the exact apperance. Example:

<body>
    <div class="wrapper">
        <div class="article first-article">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</body>

CSS:

/* Article Styles */
.wrapper .article {
    padding: 5px;
    border: 1px solid #ddd;
    text-align:left;
    font-weight: normal;
}

.wrapper .article.first-article {
    text-align:center;
    font-weight: bold;
}

@insertusernamehere: You are thinking of the specific case where the first item in a list has different styling. but the example was intended to show how to name rules based on aspects of the information rather than the visual appearence. — Guffa, Oct 27 '15 at 11:20

Same id on body tag for greater css specificity

1 Answers1