#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Location
    San Francisco, CA
    Posts
    226
    Rep Power
    12

    css inheritance - best practices


    This is probably a very basic question for someone who has been working with styles for years, so I apologize in advance.

    Here are three styles for 3 different buttons:
    Code:
    INPUT.buttons {	
    	font-family: Tahoma, Verdana, Arial;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-weight: bold;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	background-color: #748196;
    	cell-spacing: 4px;
    	width: 70px;
    }
    
    INPUT.smallbuttons {	
    	font-family: Tahoma, Verdana, Arial;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-weight: bold;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	background-color: #748196;
    	cell-spacing: 4px;
    	width: 30px;
    }
    
    INPUT.longbuttons {	
    	font-family: Tahoma, Verdana, Arial;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-weight: bold;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	background-color: #748196;
    	cell-spacing: 4px;
    	width: 120px;
    }
    The only difference between the 3 styles is the width. It seems like bad practice to have to declare all the other elements that the 3 styles have in common, 3 times.

    I'm wondering what is the best way to handle this. In theory I'd like my code be something like this:
    Code:
    INPUT.buttons {	
    	font-family: Tahoma, Verdana, Arial;
    	color: #FFFFFF;
    	font-size: 11px;
    	font-weight: bold;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	background-color: #748196;
    	cell-spacing: 4px;
    }
    
    INPUT.smallbuttons { width: 30px; }
    INPUT.longbuttons { width: 120px; }
    and have the latter two styles inherit the "buttons" class style.
    I do this with other styles for example:
    Code:
    INPUT {
    	font-family: Tahoma, Verdana, Arial;
    	font-size: 11px;
    	color: #333333;
    	border-top: #666666 1px outset;
    	border-left: #666666 1px outset;
    	border-bottom: #666666 1px inset;
    	border-right: #666666 1px inset;
    	background-color: #FFFFFF;
    	width: 85px;
    }
    INPUT.prefix { width: 22px; }
    INPUT.suffix { width: 27px; }
    but that makes sense because I'm declaring a style for ALL input tags and then the classes inherit the INPUT's elements, overriding the width.

    Also, I don't want to override the style in the HTML like this:

    <input class="buttons" style="width: 10px"....

    nor do I want to use JavaScript to dynamically set the width.

    How do I do this?

    Thanks,
    -Samantha
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2790
    Hope this helps.
    Attached Files

IMN logo majestic logo threadwatch logo seochat tools logo