-3

Let's say you want to center the text here:

<div class="wrapper">
    <div class="content">
        <p class="body">
            GUCCI GANG, GUCCI GANG, GUCCI GANG, GUCCI GANG, GUCCI GANG, GUCCI GANG
        </p>
    </div>
</div>

It doesn't make a difference whether you put text-align: center; on wrapper, content, or body. Which element of the nesting tree should you apply CSS to in such cases? Is it a good practice to style the innermost element?

Improve this question
1
  • 3
    Thought experiment: Let's say you decide to add another paragraph later in the "content" div. Will it be easier to add another style reference to accommodate the new paragraph, or just let it pick up the outer style automatically? Which behavior is most desirable in your specific application?
    – Robert Harvey
    Aug 13, 2018 at 3:46

1 Answer 1

Reset to default
3

There is no single answer to this. Depends what your style is, whether it is inheritable, how the document structure might change in the future, etc.

@robert-harvey ' comment makes sense (though your style can easily say 'all body paragraphs in div.content, i.e a selector like div.content p.body {rules}, so it applies to anything you add in later)

Apply the style to whatever it logically belongs - e.g., if it is a background color for the entire division, that is, don't apply it to 'all paragraphs in the division', apply it to the div itself. On the other hand, if it is meant to highlight paragraphs of class body (but not other paragraphs nor the blank space between those), then apply it only to p.body.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.