Hi, Tee
I must agree with your colleague. Of course "container" is en easy
recognizable kind of object name. We may image it is a block element. But even
this way, giving the tag to the selector prevents future designers (that may
work with your CSS) from misusing your style. If he sees right away it is a div
(a block element then), he will know to treat it as one, and to give and use
the applied properties. For example, he may be tempted to use the same
definition for inline elements, and sometimes the properties that applied
correctly to block elements don't work for inline ones.
I'm not talking here about the properties listed in your example,
but looking at it, "margin-bottom" won't apply to inline elements.
When developing a CSS design site, have in mind that somebody else,
one day, will maybe update it without your knowledge. So, you must prevent
others for misusing your definitions. I think identifying elements its one of
the things to do.
I always indicate, in one way or the other, the tag in the
selector. I often use prefixes for IDs (like in "#pIntro", for a paragraph
definition, or "#fsSearch" for a fieldset). In this way, anybody that reads
your CSS will be able to identify to which element the definitions are applied.
For classes, I always include the tag in the selector (like in "p.intro").
From all the projects in CSS design I've developed, I never found a
situation where I could use the same style definition for a "p", a "div" or a
"strong", for example....
Hope this helps! :-)
Angela
_____
De : listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] De la part de Tee
G. Peng
Envoyé : vendredi 26 janvier 2007 03:20
À : wsg@webstandardsgroup.org
Objet : Re: [WSG] css conventions
On Jan 25, 2007, at 5:33 PM, Michael Turnwall wrote:
I have a co-worker, that whenever he creates a class, puts "div" in front of it
if the class is being assigned to a div. Here's an example:
div.container {
background-color: #fff;
margin-bottom: 18px;
}
div.container div.container_inner {
border: 1px solid #bbb;
margin-left: 8px;
}
div.container div.inset {
padding: 3px;
}
As you can see, the code can get messy rather quickly. He says he does it to
avoid conflicts. My argument is that you should only do that when you
specifically want the class only to apply to a div. If I want to use the class
on another element I can't without creating a new rule. I would think the
better way would be to create the class without the "div." part first and in
the future add the "div." part if I need to be more specific. This allows the
CSS to be more generic and cleaner.
Any thoughts? Do you think the above code is good, bad, doesn't matter and why
Interesting question. I do this a lot too, actually it has become a habit for
me to differentiate inline classes. I think it also depends on the complexity
of the layout, for example, I am responsible for CSS coding for a social
bookmarking site, in which, many sections shared common elements but different
colors in pages to differentiate tags, bookmarks, people, sites, blogs and so
on, and with each section, sometimes within the same page, or with different
pages, has different requirements for presentations purposes but still share
the same common elements, they are interwined within the site; on top of this,
I also need to seperate the code within code from layout to presentation,
because one set of code (for positioning) is used to hookup the application
(the programmer wishes is to use the same id or class for one component
throughout the entire site but with the complexity of layout sometimes it gets
very tricky and challenging me to do ) and the other for presentations (colors,
font size etc). I rarely get a chance to use ID but classes and the example you
posted has been highly useful and effective for the purpose.
I don't see anything wrong or see why it can get messy if a stylesheet is well
organzied and well commented. For a fairly simple straight forward layout, I
can see your reason and agree.
I would love to hear what other say about this, especially those who are
involved with very complex, large portal or web 2.0 social bookmarking sites.
Best,
tee
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
