Join or sign in Register for your free TechRepublic membership or if you are already a member, sign in using your preferred method below. Use Your Email Use FacebookUse Linkedin

Drawing the line with CSS

Locked

I follow the articles about using CSS with much interest, as I have been a fan since I started out with HTML six or so years back. But where does one draw the line between using CSS or HTML tags?

My number one and two reasons for using CSS is the separation of style for modular reuse and maintainability. When ones client’s decision to revise their corporate ID results in their primary corporate color changing from #000066 to #000033 you will understand why.

But how far does one take this?

A simple example: A page I’m working on has the first phrase of certain paragraphs bolded to emphasis a change in topic. The HTML could simply be this…

WHAT IS IT: Performance Testing is…

HOW: Testing is…

OR, this could be done as follows with all styling specified in the style sheet (not given)…

What is it:
Performance Testing is…

How:
Testing is…

My preference is for the later as it gives tremendous control. But, it does feel over engineered and I begin to wonder what fate holds for the and

tags.

As for the

tag, which could justifiably go the same route, one must still remember the role it, and possibly the tag, plays in search engine ranking. Given that the default

settings are most likely completely different from what the designer has imagined this would require stripping it of all it’s styling first so as to make a clean start.

Is complexity the cost of reuse and maintainability? And at what point does one jump into separating all content into XML and using XSL to render the page? (Assuming that if one is working in a CMS it can handle this!)

I’m not where I want to be but the journey sure is interesting…

Topic

I use both, external style sheets and HTML/DHTML

In reply to Drawing the line with CSS

There is no reason not to override one or more attributes by simply using HTML tags in the body of a page. Attributes set in the body will override the ones set in the style sheet.

I sometimes add or various tags for elements defined in style sheets; is deprecated but is still recognized by the browsers. I do not override settings for margins and padding, neither for headings nor for paragraphs or images. However, it should work too.

Cost vs. Benefit

In reply to Drawing the line with CSS

re:
Is complexity the cost of reuse and maintainability? And at what point does one jump into separating all content into XML and using XSL to render the page?
—– —– —– —– —– —–

The answer to the first question is tough – I think drawing the style markup OUT of the HTML doc makes it much less complex.

The second one is much easier. You draw the line based on the needs of the task at hand – and more importantly, who will be maintaining the site.

Take the CENTER tag/attribute, for example. It can be set in either CSS or HTML.

If you’re running a content publication site, and have folks submitting content – you may want to control alignment to jibe with the look and feel of the rest of the site.

Your content providers will likely submit content as straight HTML – and may try to set alignment attributes that would screw up your page layout. By using CSS – you can have the content providers provde content, and the content publishers publish it, and neither will have to step on the other’s toes.

Now, if you don’t want your content providers to have to know HTML, you can allow them to enter the content in a data-aware HTML form, and then spit that content out as XML/XSL.

In addition to lightening the load on your content provider’s tech skills – you have more control over the content. You can exercise more granular control of the content they submit and how it is structured.

But if you’re building a 4-page vanity site – that would be overkill.

there is no tradeoff

In reply to Drawing the line with CSS

there is no tradeoff. your first example is much closer and provides just as much flexibilty. why can’t you do something like:

#intro {font-family: verdana, arial, helvetica, sans-serif;}
#intro p {font-size: 0.8em; color: #000;}
#intro p span {font-weight: bold; color: #FF0000;}

What is it: Performance Testing is…

How: Testing is…

Better to over engineer than under

In reply to there is no tradeoff

Just an example of what you can avoid by using as much style as possible (nickpixel’s method is the best way to consolidate things)

I have a site that uses linked style sheets, but for some reason I put an in-line style (just as risky as pure HTML) in the page template. It was something like

.

I just downloaded Firefox and found out it wants you to use “font-size” instead of “font”. I had to change this line on over 100 pages. So lesson learned once again, I will use linked style sheets for virtually everything.

Personal opinion: H1 should always be modified by style– it outputs ugly text.

Don’t set a style for !

In reply to there is no tradeoff

I think it’s a real mistake to set a style for a tag with no class or id specified. Span is a general type of tag that should have no meaning in and of itself – as I see it, its whole purpose is to give you a place to hang a style off of. If you want to be able to control formatting within a span, use a class or something.

Reply To: Drawing the line with CSS

In reply to Don’t set a style for !

how are the span’s styled differently in the example below? there are no class names. don’t get me wrong, there are plenty of times when you’ll want or need to use classes but overuse of classes is currently the most common mistake made by people switching to css. do a google search for some good articles on the subject (ie; http://www.simplebits.com/notebook/2003/08/27/this_validates.html).

div {font-family: verdana, arial, helvetica, sans-serif;}
p {font-size: 0.8em;}
#intro p {color: #000;}
#main_text p {color: #CCC;}
#intro p span {font-weight: bold; color: #FF0000;}
#main_text p span {font-style: italic; color: #0000FF;}

What is it: Performance Testing is…

How: Testing is…

Our Company is blah blah blah…

When you do business with Our Company you will blah blah blah…

Use the right HTML

In reply to there is no tradeoff

My position would be to describe in HTML as much as possible the structure of the text. If the first words of a paragraph define the content of that paragraph, it would be a definition list:

What is it:

Performance Testing is…

How:

Testing is…

Even without CSS, the structure stands out.
With CSS you can make it look like you want it to:

different subject

In reply to Use the right HTML

harry, semantics are a whole different topic altogether. you are right that markup should describe the structure of the page but that’s a case by case decision with no 100% right answer (although there are wrong answers). for example, he may not want the unstyled version to look like an unstyled dl (appearing on seperate lines instead inline).

What is it:
Performance Testing is…
How:
Testing is…

and if one wants to get real technical about semantics they could say that the definition title is actually “Performance Testing”, not “What is it”. “What is it” could just as easily be an h2, h3 or h4.

my point was just to show that you don’t need to create class and id hooks for everything to maintain control of everything. semantics is another discussion and i’m sure it would be a long one.

take a look:
http://www.simplebits.com/bits/simplequiz/

[Author]

Replies