RE: Feature request for CSS

This is amazing! Exactly what I wanted. The concurent development of two almost identical projects is a bit problematic. One of them should be adopted as a standard and be adopted by browser. This would signmificantly reduce bandwith and speed up web browsing, espcially for mobile browsers.
 
In you opinion David, which one would be more likely to be adopted?

From: David Chambers [mailto:david.chambers.05@gmail.com] 
Sent: August 17, 2010 1:09 PM
To: Goderre,Laurent [NCR]
Cc: www-style@w3.org; bert@w3.org; laurent.goderre@gmail.com
Subject: Re: Feature request for CSS

Goderre, you may be interested in checking out LESS and Sass.


On 15 July 2010 07:19, Goderre,Laurent [NCR] <Laurent.Goderre@ec.gc.ca> wrote:
Hi,

Many times while creating CSS I hoped there were ways too use Object Oriented Programming style inheritance of classes to optimize code and make it easier to manage. However, this feature is not implemented in CSS. I understand that CSS uses inheritance for the DOM and some CSS values can be passed to child elements. However, the feature I am talking about is to have the ability to reuse styles from one class in another. The following example illustrates my point.

Consider the template in Figure1.

<<Figure1.jpg>>

Below is a simplification of the code for this template


-------------------------------------------------------------------------------------------------------- 
<body> 
        <div id="banner"> 
                <p>Banner Text</p> 
        </div> 
        <div id="Breadcrumbs"> 
                <ol> 
                        <li><a href="">Home</a></li> 
                        <li><a href="">Level 1</a></li> 
                </ol> 
        </div> 
        <div id="content"> 
                <h1>Title</h1> 
                <div class="column1_2"> 
                        <p>Column 1</p> 
                </div> 
                <div class="column2_2"> 
                        <p>Column 2</p> 
                </div> 
                <div class="column1_1"> 
                        <p>Some Content</p> 
                </div> 
        </div> 
        <div id="left"> 
                <h2>Section 1</h2> 
                <ul> 
                        <li><a href="">Item 1</a></li> 
                        <li><a href="">Item 2</a></li> 
                </ul> 
        </div> 
        <div id="right"> 
                <h2>Section 1</h2> 
                <div> 
                        ... 
                </div> 
        </div> 
        <div id="footer"> 
                <ul> 
                        <li><a href="">Home</a></li> 
                        <li><a href="">Help</a></li> 
                        <li><a href="">Site Map</a></li> 
                </ul> 
        </div> 
</body> 
--------------------------------------------------------------------------------------------------------


The CSS would look a bit like this:


-------------------------------------------------------------------------------------------------------- 
#banner{ 
        background-color:#363; 
        color:#FFF; 
        text-align: center; 
        font-size: 120%; 
}

[…]

.column1_2, ..column2_2, .column1_1 { 
        border-color:#363; 
        border-style:solid; 
}

.column1_2, ..column2_2{ 
        border-width:1px; 
}

.column1_1 {{ 
        border-width:3px; 
}

[…]

#left h2, #right h2{ 
        background-color:#363; 
        color:#FFF; 
        margin-bottom:0.2em; 
}

#left ul, #footer ul{ 
        list-tyle-type:none; 
        margin:0; 
        padding:0; 
}

#left ul{ 
        background-color: #CC9; 
        color: #000; 
}

#footer ul{ 
        background-color:#363; 
        color:#FFF; 
}

#footer ul li{ 
        float:left; 
}

--------------------------------------------------------------------------------------------------------


The color #363 is repeated several times. The following code illustrates how the CSS could look like with clas    inheritance.


--------------------------------------------------------------------------------------------------------

/* COLOR SWATCHES */

.primary-solid{ 
        background-color:#363; 
        color:#FFF; 
}

.primary-border{ 
        border-color:#363; 
}

.secondary-solid{ 
        background-color:#363; 
        color:#FFF; 
}

/* END OF COLOR SWATCHES */

#banner{ 
        reference: primary-solid 
        text-align: center; 
        font-size: 120%; 
}

[…]

.column1_2, ..column2_2, .column1_1 { 
        reference: primary-border 
        border-style:solid; 
}

.column1_2, ..column2_2{ 
        border-width:1px; 
}

.column1_1 {{ 
        border-width:3px; 
}

[…]

#left h2, #right h2{ 
        reference: primary-solid 
        margin-bottom:0.2em; 
}

#left ul, #footer ul{ 
        list-tyle-type:none; 
        margin:0; 
        padding:0; 
}

#left ul{ 
        reference: secondary-solid 
}

#footer ul{ 
        reference: primary-solid 
}

#footer ul li{ 
        float:left; 
}

--------------------------------------------------------------------------------------------------------

With the previous example, all colors are defined in "abstract" CSS classes so changing to a new color scheme involves only changing those colors. Pushing this example further, websites with major section all using the same template but using different color schemes could all use the main CSS and provide an additional stylesheet that override those colors.

This feature would be very helpful to help web developer keep code clean and manageable. It would also make it easier for template developers making their templates easy to customize.

Thank you for taking the time to read this

Laurent Goderre
Web Services Division | Division des Services Web
Business Applications and Solutions Directorate | Direction des applications et des solutions d'affaires
Chief Information Officer Branch | Direction du dirigeant principal de l'information
Environment Canada | Environnement Canada
Gatineau, Canada
Laurent.Goderre@ec.gc.ca
Telephone | Téléphone 819-994-3487
Government of Canada | Gouvernement du Canada

Received on Wednesday, 1 September 2010 07:45:33 UTC