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">Public ity</h2>

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

Thank You,
Miguel

[Jonathan N. Little]

Re: Class Structure

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">Public ity</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.html#descendant-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]

Re: Class Structure

On Sep 22, 2:56 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:

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">Public ity</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.html#descendant-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.LittleWorks Studio.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]

Re: Class Structure

shapper wrote:

On Sep 22, 2:56 pm, "Jonathan N. Little" <lws4...@centra l.netwrote:

<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