- From: David Chambers <david.chambers.05@gmail.com>
- Date: Wed, 18 Aug 2010 05:08:33 +1200
- To: "Goderre,Laurent [NCR]" <Laurent.Goderre@ec.gc.ca>
- Cc: www-style@w3.org, bert@w3.org, laurent.goderre@gmail.com
- Message-ID: <AANLkTik7YHQYfDDjGL2-ejfsXRUez-WaRYeZqRXQOq_9@mail.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 UTC