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

Feature request for CSS

From: Goderre,Laurent [NCR] <Laurent.Goderre@ec.gc.ca>
Date: Wed, 14 Jul 2010 19:19:27 +0000
Message-ID: <9AC967FED721B94BA9D47B71BA8AD12801933E9C@NCRX11.ncr.int.ec.gc.ca>
To: <www-style@w3.org>, <bert@w3.org>
Cc: <laurent.goderre@gmail.com>
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 








Figure1.jpg
(image/jpeg attachment: Figure1.jpg)

Received on Tuesday, 17 August 2010 15:34:16 GMT

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