Re: [css-d] CSS Organization
On 31/08/2011 17:34, Kevin A. Cameron wrote: My favourite part from that presentation was when she said (paraphrased) what's between the brackets is trivial, it's the selectors that are the tricky part. Kevin The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim On 31/08/2011 19:00, Kevin A. Cameron wrote: I'm guessing that was preprocessors, the likes of LESS or SASS. Kevin Thanks, Kevin. That would be unknown territory for me at present. I expect I'll have to go there eventually. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
On 1/09/2011 7:31 PM, Tim Dawson wrote: On 31/08/2011 17:34, Kevin A. Cameron wrote: The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim On 31/08/2011 19:00, Kevin A. Cameron wrote: I'm guessing that was preprocessors, the likes of LESS or SASS. Kevin Thanks, Kevin. That would be unknown territory for me at present. I expect I'll have to go there eventually. Tim http://sass-lang.com/ | Sass makes CSS fun again. Sass is an | extension of CSS3, adding nested rules, | variables, mixins, selector inheritance, | and more. It’s translated to well-formatted, | standard CSS using the command line tool or | a web-framework plugin. I myself just love to code raw CSS or CSS3. The only processor I use is my brain. On a CSS note, a mutated version of SASS was on the verge of being added to CSS3 [1] until I started considering the parsing nightmare of such CSS and objected [2]. The reason being is that UAs parse CSS in many different ways. One such test series. http://css-class.com/test/css/parsing/escapes.htm That is just using escapes. It is far worse with other CSS tokens and to change the rules of CSS parsing when such UAs are so fragile would do much damage to CSS and backward compatibility. 1. http://lists.w3.org/Archives/Public/www-style/2011Jun/0022.html 2. http://lists.w3.org/Archives/Public/www-style/2011Mar/0553.html -- Alan Gresley http://css-3d.org/ http://css-class.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
My favourite part from that presentation was when she said (paraphrased) what's between the brackets is trivial, it's the selectors that are the tricky part. Kevin __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
On 31/08/2011 17:34, Kevin A. Cameron wrote: My favourite part from that presentation was when she said (paraphrased) what's between the brackets is trivial, it's the selectors that are the tricky part. Kevin The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
I'm guessing that was preprocessors, the likes of LESS or SASS. Kevin On Wed, Aug 31, 2011 at 10:53 AM, Tim Dawson t...@ramasaig.com wrote: On 31/08/2011 17:34, Kevin A. Cameron wrote: My favourite part from that presentation was when she said (paraphrased) what's between the brackets is trivial, it's the selectors that are the tricky part. Kevin The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __**__**__ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/**mailman/listinfo/css-dhttp://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.**com/http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_**support_evolt/http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
Her slides are available. (Though they don't exactly match the presentation.) Flipping through those in tandem with recording of presentation helped me some. http://www.css-discuss.org/mailman/listinfo/css-d -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Dawson Sent: Wednesday, August 31, 2011 10:54 AM To: css-d@lists.css-discuss.org Subject: Re: [css-d] CSS Organization On 31/08/2011 17:34, Kevin A. Cameron wrote: My favourite part from that presentation was when she said (paraphrased) what's between the brackets is trivial, it's the selectors that are the tricky part. Kevin The talk was interesting, but the camera work poor. Too much presenter, it was difficult to see the slides. Did anyone catch what she talking about towards the end; it sounded like 'pre-' something. Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
mem wrote: Let's suppose that by looking to those wireframes, I can say that all my h2 will have a padding-bottom of 10px. However, if later on, I create a rule telling that the ul will have a margin top of 5px... (because almost all may have that attribute) if I place the h2 on top of this ul, instead of the desired 10px, we will end up with 15px... and there, I ask: where/how should I subtract those extra 5 ? This is only an example, this is some sort of conflict that happen A LOT while I'm creating the css. Understood about this being only an example, but does this one case, at least, not get made much simpler by the concept of collapsing margins ? http://www.w3.org/TR/CSS2/box.html#collapsing-margins Philip Taylor __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
mem schrieb am 30.08.2011 19:31 I must develop the CSS for those 100 pages and I'm really afraid about the fact that, I will have, almost surely, rules that will overwrite each other and it will be a mess, sooner or later. Here is an interesting discussion: http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ Best, Ingo __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
On 30-08-2011 19:31, Ingo wrote: mem schrieb am 30.08.2011 19:31 I must develop the CSS for those 100 pages and I'm really afraid about the fact that, I will have, almost surely, rules that will overwrite each other and it will be a mess, sooner or later. Here is an interesting discussion: http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ Best, Ingo @Igo: Thanks a lot, very interesting reading. I have a lot to think about now. @Philip Taylor: on that specific case, your suggestion may well be taken into consideration. Cheers, Márcio __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Organization
On Aug 31, 2011, at 2:38 AM, Philip TAYLOR (Webmaster, Ret'd) wrote:
Let's suppose that by looking to those wireframes, I can say that all my h2
will have a padding-bottom of 10px.
However, if later on, I create a rule telling that the ul will have a margin
top of 5px... (because almost all may have that attribute) if I place the h2
on top of this ul, instead of the desired 10px, we will end up with 15px...
and there, I ask: where/how should I subtract those extra 5 ?
This is only an example, this is some sort of conflict that happen A LOT
while I'm creating the css.
Understood about this being only an example, but does
this one case, at least, not get made much simpler
by the concept of collapsing margins ?
There might be good reasons for using padding vs margins though.
Imagine you have:
h2 { padding: 10px; background: yellow; margin: 0; }
(and you want the text that follows the h2 to be flush with the yellow
background)
In that case, the adjacent sibling combinator comes in handy.
h2 { /*... */ margin:0; }
ul { /*... */ margin: 5px 0 0; }
h2 + ul { margin-top: 0; }
—
And as a general practice. Towards the end of the development, think about
rewriting the stylesheet (ok, not really…). Go through the whole thing and see
how you can optimise it.
And have lots of comments in the development version of the stylesheet.
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
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/
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/
