3 ms·

From my own experience if you understand the cascade principle and specificity well you can get away with very compact and well written CSS files. Multi-classin

by yannis 17y ago

From my own experience if you understand the cascade principle and specificity well you can get away with very compact and well written CSS files. Multi-classing is another area where developers are only now leverage to its maximum, for example if you have a look at the way the jQueryUI CSS works, by for example specifying the items you wish at the end of the file as additional classes you can introduce quite a bit of additional functionality in a much simpler way than calling functions. For example: .box{define only properties that you do not want to change from box to box } .boxColors{background:#fff; color: #f60} .arial13{font-family:arial;font-size:13px <div class="box boxColors arial13"></div> This way your classes can be used as 'functions'. As a rule, define typography and colors and opacity this way and you can keep it simple. CSS was developed as an abstraction to HTML. Any abstraction to the CSS other than adding pre-processors would create serious integration problems with the DOM model and JavaScript. (See a good discussion of this at http://people.opera.com/howcome/2006/phd/#ch-problems http://people.opera.com/howcome/2006/phd/#ch-problems by Håkon Wium Lie the original developer of CSS). Any productivity pre-processors our our business and not of the spec developers.

nostrademons 17y ago
I hate CSS that uses class names as stand-ins for typographic properties. You might as well just use font tags, because that's what you've reinvented. Instead, I'd rather have CSS classes each represent a semantic attribute of the element being styled. So instead of <div class = "box boxColors arial13">, you might have <div class=tabbedPanel>. In your stylesheet, you style tabbedPanel with the appropriate background, border, font, etc. Also don't neglect the value of containment selectors - if you want to style all tabbed panels a certain way, but only if they're in the main results, you can do: #results .tabbedPanel { ... } No need for an extra CSS class on them.
- yannis 17y ago
  I am well aware that you should try and minimize classes in the HTML. However, on large sites where, multiple people might be publishing pages with slight variations, it is preferable NOT to touch your CSS too often. The multiple class method gives you some means to control it. It also adds tremendous flexibility for libraries (see jQuery UI's method of handling multiple classes for styling widgets). Naming your class="tabbedPanel" has added no semantics to your contents and there is no such thing as 'a semantic attribute' defined nowhere. It is just a good naming convention that helps the developer and the designer. Simply there is no semantic meaning to a <div> it is just a container. How would you handle two tabbed panels, one that is red and one that is blue?
  - nostrademons 17y ago
    > How would you handle two tabbed panels, one that is red and one that is blue? Why is one red and the other blue? Surely there's some functional difference between them? I'd rather call them <div id=hot class=tabbedPanel> and <div id=cold class=tabbedPanel> if that's what they're really representing. I have nothing against multiple classes - I've written a fairly-well-used JQuery UI Combobox plugin, and I follow the normal JQuery UI conventions for class names there (ui-combobox, ui-combobox-item, etc.) I do have something against replicating typographic conventions as class names - note that it's class=ui-combobox-item, not class="displayblock height1em border1pxsolidblue fontweightbold".
    - yannis 17y ago
      I would have done it as follows: <div class="box hot"> and <div class="box cold">, hot is selected and cold it has been dropped in a 'recycle' container. I also try to minimize id's, for example I could have <li class="cold"> as well. I do agree with you that one should not just map all the CSS attributes into classes. Perhaps my example was not a good one. However, three or four additional sets of classes, has increased my own productivity, especially during development. I keep a partial CSS file with 5, 6 generic sets. Most large newspaper sites use this method. It all depends in what one needs to do. In this method the style sheet is 'more abstracted', it does not know about a box.cold. If you skinning a wordpress template, you better off to offer the box.cold in the stylesheet, but then you must provide a second style sheet to offer the box.hot! This method also allows a bit of presentational flexibility for new page designs, without playing with the main CSS files or adding another CSS file. Somewhere, along the line there is a golden line I guess.
chriseppstein 17y ago
The cascade is a good tool. it's the reason why elements look "right" by default when nested another element within the document. The application of multiple classes to an element has nothing to do with the "Cascade". Your classes should describe their meaning, not their appearance. CSS was created to abstract away the appearance. Sass makes CSS more "CSSy" in that respect. In the end, built-in browser support for a higher-order stylesheet syntax will be driven by increasingly complex cross-browser issues, over-the-wire transfer of complex stylesheets and rendering-time performance issues. It could be the case that a few simple extensions to CSS would enable css preprocessors to do their job better, I have some ideas about that and will post them eventually.
gnaritas 17y ago
Consider though that this approach, using classes as functions, violates the primary intent of CSS, separating presentation from markup. You've now gone back to modifying your markup to change the presentation. I build skinnable sites, where there are multiple different looks for identical markup. The approach above would fail horribly at doing this. Markup should be semantic, a div with a class header or footer is semantically identical to a header or footer tag. Markup is also quite often tightly coupled to code and much much harder to change than CSS, so this approach fails there as well. Blueprint takes this approach, and I think it's just wrong, this is not how CSS should be used. What would be really neat would be a syntax to be able to have CSS classes inherit from other CSS classes like mixins so that you could build that header style by mixing in several selectors. Then you could use the above approach without corrupting the markup with style information keeping the look isolated to the CSS file. I see SASS provides, that alone makes it worth looking into.
- chriseppstein 17y ago
  LessCSS also does this. However, LessCSS lacks the capability to do macro expansion which greatly limits its usefulness as framework implementation language.
  - gnaritas 17y ago
    Dude, thank you, less is exactly what I've been looking for. It uses existing syntax and adds exactly what is necessary, macros are not. This I can teach to my designers, macros would only confuse them as would a different syntax.

by yannis 17y ago

nostrademons 17y ago

I hate CSS that uses class names as stand-ins for typographic properties. You might as well just use font tags, because that's what you've reinvented. Instead, I'd rather have CSS classes each represent a semantic attribute of the element being styled. So instead of <div class = "box boxColors arial13">, you might have <div class=tabbedPanel>. In your stylesheet, you style tabbedPanel with the appropriate background, border, font, etc. Also don't neglect the value of containment selectors - if you want to style all tabbed panels a certain way, but only if they're in the main results, you can do: #results .tabbedPanel { ... } No need for an extra CSS class on them.

yannis 17y ago
I am well aware that you should try and minimize classes in the HTML. However, on large sites where, multiple people might be publishing pages with slight variations, it is preferable NOT to touch your CSS too often. The multiple class method gives you some means to control it. It also adds tremendous flexibility for libraries (see jQuery UI's method of handling multiple classes for styling widgets). Naming your class="tabbedPanel" has added no semantics to your contents and there is no such thing as 'a semantic attribute' defined nowhere. It is just a good naming convention that helps the developer and the designer. Simply there is no semantic meaning to a <div> it is just a container. How would you handle two tabbed panels, one that is red and one that is blue?
- nostrademons 17y ago
  > How would you handle two tabbed panels, one that is red and one that is blue? Why is one red and the other blue? Surely there's some functional difference between them? I'd rather call them <div id=hot class=tabbedPanel> and <div id=cold class=tabbedPanel> if that's what they're really representing. I have nothing against multiple classes - I've written a fairly-well-used JQuery UI Combobox plugin, and I follow the normal JQuery UI conventions for class names there (ui-combobox, ui-combobox-item, etc.) I do have something against replicating typographic conventions as class names - note that it's class=ui-combobox-item, not class="displayblock height1em border1pxsolidblue fontweightbold".
  - yannis 17y ago
    I would have done it as follows: <div class="box hot"> and <div class="box cold">, hot is selected and cold it has been dropped in a 'recycle' container. I also try to minimize id's, for example I could have <li class="cold"> as well. I do agree with you that one should not just map all the CSS attributes into classes. Perhaps my example was not a good one. However, three or four additional sets of classes, has increased my own productivity, especially during development. I keep a partial CSS file with 5, 6 generic sets. Most large newspaper sites use this method. It all depends in what one needs to do. In this method the style sheet is 'more abstracted', it does not know about a box.cold. If you skinning a wordpress template, you better off to offer the box.cold in the stylesheet, but then you must provide a second style sheet to offer the box.hot! This method also allows a bit of presentational flexibility for new page designs, without playing with the main CSS files or adding another CSS file. Somewhere, along the line there is a golden line I guess.

chriseppstein 17y ago

The cascade is a good tool. it's the reason why elements look "right" by default when nested another element within the document. The application of multiple classes to an element has nothing to do with the "Cascade". Your classes should describe their meaning, not their appearance. CSS was created to abstract away the appearance. Sass makes CSS more "CSSy" in that respect. In the end, built-in browser support for a higher-order stylesheet syntax will be driven by increasingly complex cross-browser issues, over-the-wire transfer of complex stylesheets and rendering-time performance issues. It could be the case that a few simple extensions to CSS would enable css preprocessors to do their job better, I have some ideas about that and will post them eventually.

gnaritas 17y ago

Consider though that this approach, using classes as functions, violates the primary intent of CSS, separating presentation from markup. You've now gone back to modifying your markup to change the presentation. I build skinnable sites, where there are multiple different looks for identical markup. The approach above would fail horribly at doing this. Markup should be semantic, a div with a class header or footer is semantically identical to a header or footer tag. Markup is also quite often tightly coupled to code and much much harder to change than CSS, so this approach fails there as well. Blueprint takes this approach, and I think it's just wrong, this is not how CSS should be used. What would be really neat would be a syntax to be able to have CSS classes inherit from other CSS classes like mixins so that you could build that header style by mixing in several selectors. Then you could use the above approach without corrupting the markup with style information keeping the look isolated to the CSS file. I see SASS provides, that alone makes it worth looking into.

chriseppstein 17y ago
LessCSS also does this. However, LessCSS lacks the capability to do macro expansion which greatly limits its usefulness as framework implementation language.
- gnaritas 17y ago
  Dude, thank you, less is exactly what I've been looking for. It uses existing syntax and adds exactly what is necessary, macros are not. This I can teach to my designers, macros would only confuse them as would a different syntax.