W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: Feature request for CSS

From: David Chambers <david.chambers.05@gmail.com>
Date: Wed, 18 Aug 2010 05:08:33 +1200
Message-ID: <AANLkTik7YHQYfDDjGL2-ejfsXRUez-WaRYeZqRXQOq_9@mail.gmail.com>
To: "Goderre,Laurent [NCR]" <Laurent.Goderre@ec.gc.ca>
Cc: www-style@w3.org, bert@w3.org, laurent.goderre@gmail.com
Goderre, you may be interested in checking out LESS <http://lesscss.org/>and
Sass <http://sass-lang.com/>.


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* <Laurent.Goderre@ec.gc.ca>
> Telephone | Téléphone 819-994-3487
> Government of Canada | Gouvernement du Canada
>
>
Received on Tuesday, 17 August 2010 17:09:08 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT