Re: [WSG] css conventions

[Ben Buchanan]

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

--
--- 
--- 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]
***

Re: [WSG] css conventions

[al morris]

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* 



***
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

[Ricci Angela]

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

[Tee G. Peng]

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]
***

Re: [WSG] css conventions

[Bruce Gilbert]

Michael,

I think it's fine when applying to divs and I often do it myself, but
wouldn't make since to apply to non div elements...so in short, I
agree with you :-)

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.

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]
***



--
::Bruce::


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] css conventions

[Christian Montoya]

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]
***

[WSG] css conventions

[Michael Turnwall]

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]
***