RE: [WSG] css conventions
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]
***
Re: [WSG] css conventions
I agree. Apply generic styles to a class, then add html tags as you go. This
avoids problems with specificity. The div.container class has a greater
specificity than the .container class, If both classes have the same
styles, the div.container class will override .container.
On 1/26/07, Michael Turnwall [EMAIL PROTECTED] 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
*--Michael Turnwall*
visit me at *turnwall.net* http://turnwall.net
***
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]
***
Re: [WSG] css conventions
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 I personally do the direct opposite of your coworker - I only add an element to the selector when there is a specific reason to do so. In the long run I've found that it's easier for maintenance - if an element is changed you don't have to track down the CSS to update the styles. For example, if you have a class on an OL and later turn it into a UL, your coworker has to update the code and the stylesheet. Similarly, I've noticed some people use IDs when a class would be more appropriate - I only use IDs for elements that should specifically only appear one time. Often an element is the only current instance, but could easily be joined by another later on. Then to add more instances you have to add each ID or convert to classes. Just my 2c. cheers, Ben -- --- http://www.200ok.com.au/ --- The future has arrived; it's just not --- evenly distributed. - William Gibson *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] css conventions
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
--Michael Turnwall
visit me at turnwall.net
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] css conventions
On 1/25/07, Michael Turnwall [EMAIL PROTECTED] 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.
I think you have the right idea... the above code is not very good.
The fact that he's making rules which you can't reuse just because he
insists on adding div. is a problem. I think the way to do this is to
start with a generic .container, and then if there is something that
should be specific to divs add a div.container rule... but working
without a .container rule at all is pointless.
--
--
Christian Montoya
christianmontoya.net .. designtocss.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
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]
***
