homepage Welcome to WebmasterWorld Guest from 54.234.141.47
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
A Change in the way I write and think about CSS.
make more flexible CSS
Sarah Atkinson

10+ Year Member



 
Msg#: 3774247 posted 2:40 pm on Oct 27, 2008 (gmt 0)

While working with larger site’s CSS files I have found myself making patch fixes to problems that I myself have created with the CSS files. The big problem is styling html tags such as <p>, <h1>, <h2>, and <a>.

This is making me break more rules then I follow. Html tags should be used for semantic markup and not style. But I find that in many cases my <h2> on one page differ from the style of <h2> tags on another page or in another section. This leaves me with 2 choices; either use a different tag where an <h2> is needed, or create a separate fix class to augment the <h2>.

Using a fix class creates a problem in itself when later I decide to change the original <h2> style to something else. This then may break all the fixes I put on for other tags.
One point of CSS is to create a more flexible design lending itself to easer modification. However applying styles directly to html tags contradicts this point by making the CSS more rigid and inflexible.

My solution is when writing styles it is better to sick them in classes or Ids so that the temptation of using tags for styling is not there. In the html then declare your heading as <h2 class=”headingstyle1”>my heading</h2>

Any comments?

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3774247 posted 3:04 pm on Oct 27, 2008 (gmt 0)

Interesting.

I think of my design as having some sort of common layout for a e.g. a section title (let's say a <h2>). That layout will go in what I apply on h2 via css.
If I need an H2 in another context, let's say as a title in a forum section, Obviously I want the result to be different, but I'd probably add an id (e.g.: "
<body id="forum">" and then style with "#forum h2 {...}") on a body or other wrapping element to allow me to select these headers independently from those on the rest of the site.

Basically I use a higher up parent's ID, to select the element's rendering instead of giving all the elements a class or ID)

I'm still convinced adding classes and Id's all over the html is a bad idea unless it represents an inherent part of the content (Let's say you have a manual and you use "warning" paragraphs, sure those <p>'s need to be labeled as such).

Also if you have page or section specific styles, you can put them in a separate file and only load them where needed.

dreamcatcher

WebmasterWorld Senior Member dreamcatcher us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3774247 posted 4:42 pm on Oct 27, 2008 (gmt 0)

IE adds default padding to some block level elements. Always best to set the paddings and margins to 0 to avoid too many headaches. Then style accordingly:

div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
margin:0;
padding:0;
}

dc

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3774247 posted 4:57 pm on Oct 27, 2008 (gmt 0)

I sometimes use classes but often I can get away with using these in the style sheet:

div.nav h2 { ... }

div.content h2 { ... }

to select out which area of the page the h2 is on.

Sometimes I'll have a notices or feature box (another div) and the h2 in that is styled with

div.content div.notice h2 { ... }

or somesuch.

Sarah Atkinson

10+ Year Member



 
Msg#: 3774247 posted 7:20 pm on Oct 28, 2008 (gmt 0)

A large part of my problem is inheritance and relitive font size

On a section I'm working on I styling trying g1smd's idea. I now have 2 differnt type(and styled lists) one is a unbulleted and give one type of data the other is a bulleted and gives another type of data.
The bulleted list I created using the .divstyle ul{ };

now that I have started styling the unbulleted lists with a class I find they inherit attributes from the other list leaving me a very fubared css file. making me think that each should have it's own class...

maybe the right place is somewhere in between

Now if only 'between' had a gps location.

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3774247 posted 7:48 pm on Oct 28, 2008 (gmt 0)

Are the lists at different depths?

Perhaps specify the full "route" to the element:

div div div.divstyle ul li { ... }

Sarah Atkinson

10+ Year Member



 
Msg#: 3774247 posted 8:27 pm on Oct 28, 2008 (gmt 0)

nope but once you start getting like that isn't that a bit over complicating things?

I'm thinking some mid marriage between class/id style everything and style tags.

I also try to only use divs where i have to and keep my semantic html nice and pretty.

I'm not sure it is best to add lots of nested divs just for style.

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3774247 posted 8:29 pm on Oct 28, 2008 (gmt 0)

No, not adding anything to the HTML, just being more specific in the CSS so as to exactly match the HTML structure.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved