Sign In
Alex D'Angelo's Blog at Microsoft
Translate This Page
Translate this page
Powered by
Microsoft® Translator
Options
Blog Home
About
Email Blog Author
Share this
RSS for posts
Atom
RSS for comments
Search
Advanced search options...
Search In:
Everything
Blogs
Forums
People
Groups
Places
Pages
Date range:
All Time
Last Year
Last 6 Months
Last 3 Months
Last Month
Last Week
Last Two Days
Tags
.NET Services
Access Control Service
Azure
C#
CSS
JavaScript
Media Center
MUI
SideShow
WCF
Win32
Windows Live
WPF
Archive
Archives
August 2009
(7)
July 2009
(1)
February 2009
(1)
December 2008
(1)
November 2008
(1)
October 2008
(2)
August 2008
(2)
July 2008
(2)
May 2008
(1)
February 2008
(1)
January 2008
(3)
December 2007
(1)
November 2007
(1)
July 2007
(1)
April 2007
(2)
November 2006
(1)
May 2006
(1)
CSS tip: Extract what's common (define class in multiple parts)
MSDN Blogs
>
Alex D'Angelo's Blog at Microsoft
>
CSS tip: Extract what's common (define class in multiple parts)
CSS tip: Extract what's common (define class in multiple parts)
Alex Dan
25 Apr 2007 10:49 PM
Comments
0
There are often cases where similar (but not exactly the same) CSS styles are defined. Avoid the redundancy by grouping the common styles and creating a second style for the difference.
For example, here are two classes that define a menu item when it is not selected and selected. They look the same except the menu item is underlined when selected.
.menuItem
{
color: black;
background: white;
border: none;
margin-left: 10px;
margin-top: 5px;
}
.menuItemSelected
{
color: black;
background: white;
border: none;
margin-left: 10px;
margin-top: 5px;
text-decoration: underline;
}
Instead, the items can be grouped differently by combining the common elements and then also defining an extra style for .menuItemSelected. There is also the added benefit that the corresponding menuItem and menuItemSelected styles will always be in sync and look the same because both selectors use the same class.
.menuItem,
.menuItemSelected
{
color: black;
background: white;
border: none;
margin-left: 10px;
margin-top: 5px;
}
.menuItemSelected
{
text-decoration: underline;
}
0 Comments
CSS
Blog - Comment List MSDN TechNet
Comments
Loading...
Leave a Comment
Name
Comment
Please add 2 and 6 and type the answer here:
Post