Re: [css-d] css organization - (divide and conquer) or not?
I was wondering what is best You already know this could be a Ford vs. Chevy post, but here is what time has taught me. Unorganized is not the way to go. It will cost you even during the initial development if it isn't organized. This is what shook out from my experience: A, I have one main style for the entire site. Internally it is organized by: 1. Classes that apply to the entire page. 2. Next the body and containing page. 3. Next the individual areas that apply to each page such as header, content, columns, footer. They are arranged in the order of the page. That way I know if I want to change something in the footer main content. In the columns I have main1, main2, main3 based on if the page uses a 1 column, 2 column, or 3 column layout as the content will vary in width. By handling all of the elements in a certain area, you don't need to be concerned with inheriting something from another area. 4. At the bottom of the main css are the use everywhere styles such as content wrappers etc. B. CSS horizontal and vertical navs and anything reusable are in separate css files so you can just copy them to new sites. C. I have a whatever.css file and another one name whatever_ie.css and a conditional comment in the top of each page. I've learned it's too difficult to maintain by function and creative names. If you have a color with a cute name that applies to multiple elements in different areas on the site, you can never be sure what the impact will be. Moreover, if you change say the color of a certain area, there are normally other things that need to change as well such as text color etc. Using my method, you simply locate the area you want to change, and the elements will all be there to remind you what all else might need to be changed or why what you were contemplating doing isn't such a good idea after all. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
Personally, I tried once method 2 and lately had to repent for it,
because I kept going forward and backward in the file to change the
rules or to find a mistake etc.
I'm not an expert web developer, but recently I approached another
method involving more files. I prefer to have a basic file for rules
common to all pages in my site, then a second (or more) file in each
page, to declare page specific rules, that don't involve other pages.
I agree with David that everybody has a different way to organize his
things, and the only way to make it easy is to explain with comments and
other documentation your choice and instructions on how to manage your
creation.
Emanuele
Arian Hojat ha scritto:
I have been looking at some tutorials. and some recommend the usual 'split
into basic.css, typography.css, layout.css, colors.css, etc', but I can see
a few peoples' arguments that to make a change for 1 thing, you might be
looking at changing alot of files. For example, when you want do change
layout for the .posts class,
#Method1 - have to change across 3 files
//color.css
.posts{ color: orange; background-color: black;}
//typography.css
.posts{ font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif; }
//layout.css
.posts{ float:left; width: 200px; }
#Method2 - have to change 1 files, organized
/*Colors */
.posts{ color: orange; background-color: black;}
/*Typography */
.posts{ font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif; }
/*Layout */
.posts{ float:left; width: 200px; }
#Method3 - have to change 1 files, un-organized
.posts{
color: orange; background-color: black;
font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif;
float:left; width: 200px;
}
I was wondering what is best, for a quick job, i'd probably do #3; but for a
big job I wasn't sure what people have figured is best?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css organization - (divide and conquer) or not?
I have been looking at some tutorials. and some recommend the usual 'split
into basic.css, typography.css, layout.css, colors.css, etc', but I can see
a few peoples' arguments that to make a change for 1 thing, you might be
looking at changing alot of files. For example, when you want do change
layout for the .posts class,
#Method1 - have to change across 3 files
//color.css
.posts{ color: orange; background-color: black;}
//typography.css
.posts{ font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif; }
//layout.css
.posts{ float:left; width: 200px; }
#Method2 - have to change 1 files, organized
/*Colors */
.posts{ color: orange; background-color: black;}
/*Typography */
.posts{ font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif; }
/*Layout */
.posts{ float:left; width: 200px; }
#Method3 - have to change 1 files, un-organized
.posts{
color: orange; background-color: black;
font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif;
float:left; width: 200px;
}
I was wondering what is best, for a quick job, i'd probably do #3; but for a
big job I wasn't sure what people have figured is best?
Thanks,
Ari
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
One thing to consider for your 3rd idea is that if you have to pass the
project off to someone else, the other two methods require the new
person to understand your logic and why you split things up into
multiple files. This could lead to frustration on their part if they
don't fully understand what is happening on the web page. Frustration
may lead to venting. Venting may lead to you getting a bad rap for using
either method 1 or method 2 after you are no longer associated with the
project. The negative connotation with the work you leave behind is very
powerful and can bite you when you don't expect it.
That said, I would choose method 3. Everything is together that controls
the .posts style so I don't have to go looking elsewhere. I think it is
the best way to do it.
Paul Hanson
Technical Writer
RoboHelp ACE -
http://www.adobe.com/support/forums/team_macromedia/robohelp.html
Quintrex Data Systems http://www.quintrex.com
email: phanson at quintrex.com
-Original Message-
From: Arian Hojat
snip
#Method1 - have to change across 3 files //color.css .posts{ color:
orange; background-color: black;} //typography.css .posts{ font-size:
1em; font-family:Verdana, Arial, Helvetica, sans-serif; } //layout.css
.posts{ float:left; width: 200px; }
#Method2 - have to change 1 files, organized /*Colors */ .posts{ color:
orange; background-color: black;} /*Typography */ .posts{ font-size:
1em; font-family:Verdana, Arial, Helvetica, sans-serif; } /*Layout */
.posts{ float:left; width: 200px; }
#Method3 - have to change 1 files, un-organized .posts{
color: orange; background-color: black;
font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif;
float:left; width: 200px; }
I was wondering what is best, for a quick job, i'd probably do #3; but
for a big job I wasn't sure what people have figured is best?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
On Tue, 17 Jul 2007 13:18:17 -0400, Arian Hojat wrote: I have been looking at some tutorials. and some recommend the usual 'split into basic.css, typography.css, layout.css, colors.css, etc', but I can see a few peoples' arguments that to make a change for 1 thing, you might be looking at changing alot of files. For example, when you want do change layout for the .posts class, [examples snipped...] I was wondering what is best, for a quick job, i'd probably do #3; but for a big job I wasn't sure what people have figured is best? ~ I don't think there is a best. As another reply points out, you *may* have to consider others having to maintain your code, so that's one consideration for sure. So much depends on your general ideas about organization, and any preferences teams members may have (if you work in a team). If you have ever shared a household with others, you will realize that each person has their own ideas about how things should be organized. My suggestion is to try various schemes, and find which one suits you personally. You are on the right track just thinking about this - some kind of organization is surely better than none. :) Cordially, David -- __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
Or... Just use some comments to explain what each file does. If your reason for splitting things up is valid, then share the reasons and explain. The next person may think you are smart and write sexy code. And you know, chicks dig sexy code. - dstefani __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
Cool thanks. I think I'll stick to 1 file and separate by areas on the page (generic/basic rules for page; nav, header, content, mainContent, sidebar, footer, etc). Sometimes I get the rule that applies to generic things like a hyperlink in nav, header, content areas, so im not sure where to group it. Maybe I'll just throw those in basic rules area. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
Paul Hanson wrote:
#Method3 - have to change 1 files, un-organized .posts{
color: orange; background-color: black;
font-size: 1em; font-family:Verdana, Arial, Helvetica, sans-serif;
float:left; width: 200px; }
I was wondering what is best, for a quick job, i'd probably do #3; but
for a big job I wasn't sure what people have figured is best?
I prefer it all in one place - I'm not a fan of hunting for
myspecialclass all over a bunch of files.
--
David
[EMAIL PROTECTED]
authenticity, honesty, community
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css organization - (divide and conquer) or not?
May I add:
Method 4:
/* Header styles */
div#header {
/* all header related styles, making no distinction between of
layout and typography */
}
div#header img {
/* style rules for the logo */
}
/* Navigation */
...
/* Content area */
...
/* Footer */
...
I personally find this to be much easier to find stuff in the file. YMMV.
--
Rakesh Pai
Mumbai, India.
[EMAIL PROTECTED]
http://piecesofrakesh.blogspot.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
