Class Structure

[shapper]

Hello,

I have 3 type of h2 headers on my web site:

1 - Post titles on a blog (Ex: <h2>New documents available for
download</h2>)

2 - Content section title (Ex: <h2>Contacts</h2>)

3 - Sidebar content section title (Ex: <h2>Publicity</h2>)

I am trying to build my CSS to style the 3 different headers but I am
having some problems. I could use:
h2.Post, h2.Content and h2.Sidebar

or:
h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar

or even:
h2 (for Post), h2.Content for content and then h2.Sidebar to change
Content class so it fits Sidebar.

So a section in sidebar would be:
<h2 class = "Content Sidebar">Publicity</h2>

Could someone help me in deciding how should I structure my classes?

Thank You,
Miguel

[Jonathan N. Little]

shapper wrote:

Hello,

I have 3 type of h2 headers on my web site:

1 - Post titles on a blog (Ex: <h2>New documents available for
download</h2>)

2 - Content section title (Ex: <h2>Contacts</h2>)

3 - Sidebar content section title (Ex: <h2>Publicity</h2>)

I am trying to build my CSS to style the 3 different headers but I am
having some problems. I could use:
h2.Post, h2.Content and h2.Sidebar

or:
h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar

or even:
h2 (for Post), h2.Content for content and then h2.Sidebar to change
Content class so it fits Sidebar.

So a section in sidebar would be:
<h2 class = "Content Sidebar">Publicity</h2>

Could someone help me in deciding how should I structure my classes?

Well if each of these "sections" are defined with containing block then
I would apply the class to the container and differentiate the headings
with the "descendant selector"

http://www.w3.org/TR/CSS21/selector....dant-selectors

..sidebar h2 { /* headings for sidebars */}

..content h2 { /* headings for content area */}
<div class="sidebar">
<h2>This will have sidebar styling</h2>
<p>...</p>
</div>

<div class="content">
<h2>This will have content styling</h2>
<p>Some content...</p>
</div>

You do not have to put a class on every element...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[shapper]

On Sep 22, 2:56*pm, "Jonathan N. Little" <[e-mail]:

shapper wrote:

Hello,

I have 3 type of h2 headers on my web site:

1 - Post titles on a blog (Ex: <h2>New documents available for
download</h2>)

2 - Content section title (Ex: <h2>Contacts</h2>)

3 - Sidebar content section title (Ex: <h2>Publicity</h2>)

I am trying to build my CSS to style the 3 different headers but I am
having some problems. I could use:
h2.Post, h2.Content and h2.Sidebar

or:
h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar

or even:
h2 (for Post), h2.Content for content and then h2.Sidebar to change
Content class so it fits Sidebar.

So a section in sidebar would be:
<h2 class = "Content Sidebar">Publicity</h2>

Could someone help me in deciding how should I structure my classes?

Well if each of these "sections" are defined with containing block then
I would apply the class to the container and differentiate the headings
with the "descendant selector"

http://www.w3.org/TR/CSS21/selector....dant-selectors

.sidebar h2 { /* headings for sidebars */}

.content h2 { /* headings for content area */}

<div class="sidebar">
<h2>This will have sidebar styling</h2>
<p>...</p>
</div>

<div class="content">
<h2>This will have content styling</h2>
<p>Some content...</p>
</div>

You do not have to put a class on every element...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

I see ... that is one approach ... I was also considering it.

Using your suggested approach I get my code more organized but longer
or not?

So you don't define default styles in your CSS (when I mean default I
don't mean the resulting from some Reset.css)

A side question: How do you organize your CSS? I usually use:

Typography, Layout, ...

So in Layout I would have:

div.Sidebar

and Typography I would have:

div.Sidebar h2

Or you put everything together?

Thanks,
Miguel

[Jonathan N. Little]

shapper wrote:

On Sep 22, 2:56 pm, "Jonathan N. Little" <[e-mail]:

<snip>

>>Could someone help me in deciding how should I structure my classes?

Well if each of these "sections" are defined with containing block then
I would apply the class to the container and differentiate the headings
with the "descendant selector"

http://www.w3.org/TR/CSS21/selector....dant-selectors

.sidebar h2 { /* headings for sidebars */}

.content h2 { /* headings for content area */}

<div class="sidebar">
<h2>This will have sidebar styling</h2>
<p>...</p>
</div>

<div class="content">
<h2>This will have content styling</h2>
<p>Some content...</p>
</div>

You do not have to put a class on every element...

<you should snip my signature in replies>

I see ... that is one approach ... I was also considering it.

Using your suggested approach I get my code more organized but longer
or not?

Not sure what you mean?

>
So you don't define default styles in your CSS (when I mean default I
don't mean the resulting from some Reset.css)

Still don't know what you mean. I only define what I which to change
from browser defaults or that is significant to my design. If it don't
matter whether or not my pages font is serif or not then I do not bother
defining it!

A side question: How do you organize your CSS? I usually use:

Typography, Layout, ...

So in Layout I would have:

div.Sidebar

and Typography I would have:

div.Sidebar h2

Or you put everything together?

I organize is by the cascade. So generally the the broader more general
properties first and the more specific last.

p {
font: normal/110% "New Century Schoolbook", serif; text-indent: 3em;
}

p.shout {
font-size: x-large; font-weight: bold;
}

p#picayune {
font-size: x-small;
}

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com