[Turtle91]

Warning - channeling my inner Tex here

Originally Posted by JSWolf

If you do the div with copy, there's still copy to be used with p and they are the same class. So I would need p.copy and div.copy for exactly the same thing when I could use .copy for both.

I think that is where you are misunderstanding. You do NOT need to have p.copy and div.copy. The specificity rules, at least as far as I understand them, state that the more precise css takes priority.

for example:

p {margin:0; text-indent:1.2em; text-align:left}
   /* applies to ALL paragraphs */

div.copy {margin:2em 0 2em 1em} 
   /* applies to the div container */
div.copy p {text-indent:0 ; margin-top:.5em; font-family:Borkish}
   /* applies to all the paragraphs within the div.copy container 
 and has higher priority than any conflicting elements of the basic p tag */
div.copy p.signature {text-align:right} 
   /* applies to only the paragraphs within the div.copy container with a 
class="signature" and has higher priority than any conflicting elements of the basic 
p tag or p tags within the div.copy*/

*****

<div class="copy">
  <p>....</p>
  <p>....</p>
  <p>....</p>
</div>

will have the same styling as this ONLY if you have .copy css that covers the desired elements in both the <div> and <p>...to me that makes the css more convoluted.

<div class="copy">
  <p class="copy">....</p>
  <p class="copy">....</p>
  <p class="copy">....</p>
</div>

*****

I only need to have a class name for specific paragraphs that are different from the standard child paragraph style. My example ends up with much cleaner html and more logical/readable css.

I minimize using unspecific classes because there is a possibility of confusion when I'm looking at the html...

What styling should be applied with the following??:

.copy {yadda yadda}

<blockquote class="copy">
<div class="copy">
<p class="copy">
<table class="copy">
<ul class="copy">
<ol class="copy">
<sup class="copy">
<span class="copy">

Instead, with specific css, it is very clear exactly what styling goes with which tag, and I can use class names that make sense semantically:

HTML:

<div class="letter">
  <p>....</p>
  <p>....</p>
  <p class="signature">....</p>
</div>

<div class="email">
  <p>....</p>
  <p>....</p>
  <p class="signature">....</p>
</div>

<div class="journal">
  <p>....</p>
  <p>....</p>
  <p class="signature">....</p>
</div>

<div class="verse">
  <p>....</p>
  <p>....</p>
  <p class="signature">....</p>
</div>

CSS:

div.letter             {yadda yadda}
div.letter p           {yadda yadda}
div.letter p.signature {yadda yadda}

div.email             {yadda yadda}
div.email p           {yadda yadda}
div.email p.signature {yadda yadda}

div.journal             {yadda yadda}
div.journal p           {yadda yadda}
div.journal p.signature {yadda yadda}

div.verse             {yadda yadda}
div.verse p           {yadda yadda}
div.verse p.signature {yadda yadda}

Of course Jellby is correct in that it is a matter of taste and workflow...I was simply pointing out that you don't need to have all those redundant classes within a div.

This

<div class="copy">
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
</div>

is much cleaner than this

<p class="copy">....</p>
<p class="copy">....</p>
<p class="copy">....</p>
<p class="copy">....</p>
<p class="copy">....</p>
<p class="copy">....</p>

or this

<div class="copy">
  <p class="copy">....</p>
  <p class="copy">....</p>
  <p class="copy">....</p>
  <p class="copy">....</p>
  <p class="copy">....</p>
  <p class="copy">....</p>
</div>