CSS Style Sheets Fundamentals
I don't count myself as a web developer. Maybe what I'm saying here is really basic, but here it goes.
1. CSS Style Sheets are good. Because you can change a lot from the file without changing the site. One could even imagine a complete site makeover only from the style. Remember that style can have color, font size, div position, borders, anything one can think of and it's not in Javascript :)
2. As a corolary to the first rule, style tags and color attributes and stuff like that inside the html file are NOT good. A colleague of mine has submited the idea that there are exceptions to this, like horizontal alignment in table columns and similar basic things. But I say NO! :) If there was a requirement for a certain column to be aligned differently, then it belongs to another style class, even if it's only one column in a thousand columns with the same alignment. I do admit that it's difficult and annoying to copy all the attributes of a class to another just to change something as trivial as the text color. Which brings me to point 3.
3. You can't nest or inherit CSS classes, which is really dumb. I mean, I want a base class to contain text font and color and everything and I want to create another class that says "I am like class1, but with bold font". You can't do that as far as I know, but you can combine classes. An element can have a class="redFont blueBoldFont" which will combine the two CSS classes, and they will overwrite each other. In this case the font will be blue and bold, as the blue color will override the red.
4. CSS classes can be selective. For example .redFont td { color:red; } will apply only to table cells within elements with the redFont class. That is different from the td.redFont notation, which tells what will happen with table cells that have the redFont class. I would suggest avoiding this type of notation if possible. Also, one can somewhat separate the behaviour of a class inside another class: .redFont .blueBoldFont { color:magenta; } in a css file or within a style tag will signify that the blueBoldFont class within the redFont class will have magenta color. Everything else being a combination of the two mentioned classes. This is a little akward, but it works. Warning! the notation .class1.class2 works in Internet Explorer only. The proper notation is the classes names preceded by a dot and separated by spaces.
5. One cannot configure custom html attributes or javascript events in style. That is a hinderance, but I don't know if adding it would have helped things. I mean, I do want to configure all the elements having a draggable class to have special mousedown and mouseup events, but this can also be done from javascript.
What does this mean? It means that a well designed site will have ALL the styling, even the position and size of movable elements, in a CSS file, as it will have all the Javascript in a JS file. This kind of file separation insures that the styling can be changed independently from the Javascript code and the HTML source. It also means that when designing a Web Control, creating a complicated style system for all its elements is not necessary. Just give a default class to each pertinent html element and then give the entire control a single configurable CSS class. Then combine classes to style each element.
1. CSS Style Sheets are good. Because you can change a lot from the file without changing the site. One could even imagine a complete site makeover only from the style. Remember that style can have color, font size, div position, borders, anything one can think of and it's not in Javascript :)
2. As a corolary to the first rule, style tags and color attributes and stuff like that inside the html file are NOT good. A colleague of mine has submited the idea that there are exceptions to this, like horizontal alignment in table columns and similar basic things. But I say NO! :) If there was a requirement for a certain column to be aligned differently, then it belongs to another style class, even if it's only one column in a thousand columns with the same alignment. I do admit that it's difficult and annoying to copy all the attributes of a class to another just to change something as trivial as the text color. Which brings me to point 3.
3. You can't nest or inherit CSS classes, which is really dumb. I mean, I want a base class to contain text font and color and everything and I want to create another class that says "I am like class1, but with bold font". You can't do that as far as I know, but you can combine classes. An element can have a class="redFont blueBoldFont" which will combine the two CSS classes, and they will overwrite each other. In this case the font will be blue and bold, as the blue color will override the red.
4. CSS classes can be selective. For example .redFont td { color:red; } will apply only to table cells within elements with the redFont class. That is different from the td.redFont notation, which tells what will happen with table cells that have the redFont class. I would suggest avoiding this type of notation if possible. Also, one can somewhat separate the behaviour of a class inside another class: .redFont .blueBoldFont { color:magenta; } in a css file or within a style tag will signify that the blueBoldFont class within the redFont class will have magenta color. Everything else being a combination of the two mentioned classes. This is a little akward, but it works. Warning! the notation .class1.class2 works in Internet Explorer only. The proper notation is the classes names preceded by a dot and separated by spaces.
5. One cannot configure custom html attributes or javascript events in style. That is a hinderance, but I don't know if adding it would have helped things. I mean, I do want to configure all the elements having a draggable class to have special mousedown and mouseup events, but this can also be done from javascript.
What does this mean? It means that a well designed site will have ALL the styling, even the position and size of movable elements, in a CSS file, as it will have all the Javascript in a JS file. This kind of file separation insures that the styling can be changed independently from the Javascript code and the HTML source. It also means that when designing a Web Control, creating a complicated style system for all its elements is not necessary. Just give a default class to each pertinent html element and then give the entire control a single configurable CSS class. Then combine classes to style each element.
Comments
Comment to myself: I've found out that style block can have behaviours (only for IE) like this: behavior:url("csshover2.htc"); where the htc file is very similar to a javascript block. Interesting things can be done, like ading hover, focus behaviour to IE6. Also check out the many utilities on the net which can reformat your CSS (like JustStyle, as an example) and check/fix your html (TidyHtml).
Siderite