Css Reuse-Css inheritance in ADF

In most of time we are getting different requirements related look and feel of the components.
For example,In application we have 10 buttons with different background colors, But remaining look and feel is same like width,height and padding e.t.c

If we observe above buttons almost same look and feel only difference background color.
Normally we can achieve this we will create different styleclass and apply skinning for each individual components.

Actual Css:

af|commandButton.greenButton
{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

background: #3498db;

}

af|commandButton.blueButton

{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

background: royalblue;

}

In the above css code, Almost all css propertys are same except background, Imagine in application having more than 10 buttons, we will get a chance to increase the css code. It will be affecting the performance of  application. Not only buttons we can use for all components.

One of the way that we can achieve the above functionality by reducing CSS is by applying -tr-rule-ref property.

The below are the steps to implement the -tr-rule-ref property.

1.We need to identify common css in the components.
2.Create one styleclass with alias and put all common css in to that.

.commonButtonCss:alias 

{

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

}

3.-tr-rule-ref synatax.

  -tr-rule-ref: selector("styleclassName:alias ");

af|commandButton.greenButton

{

  -tr-rule-ref: selector("commonButtonCss:alias");

background: #3498db;

}

af|commandButton.blueButton

{

  -tr-rule-ref: selector("commonButtonCss:alias");

background: royalblue;

For reference check in oracle documentation

http://docs.oracle.com/cd/E16162_01/user.1112/e17456/adfsg_selectors.htm#ADFSG544

commandButton Skinning in ADF

These are the skinning selectors for the commandButton.

Normal Button Css:

af|commandButton.myNewButtonClass{

background: #3498db;

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none; 

border: none;

outline:none;

cursor: pointer;

}

Pseudo-classes css:

The below are the pseudo classes like hover,focus,active e.t.c.

af|commandButton.myNewButtonClass:focus,
af|commandButton.myNewButtonClass:hover,
af|commandButton.myNewButtonClass:active,
af|commandButton.myNewButtonClass:focus:hover, 
af|commandButton.myNewButtonClass:focus:hover:active {

 background: royalblue;

-webkit-border-radius: 28;

-moz-border-radius: 28;

border-radius: 28px;

font-family:  Verdana, Arial, Helvetica, sans-serif;

color: #ffffff;

font-size: 20px;

padding: 10px 20px 10px 20px;

text-decoration: none; 

background-image: none;

border: none;

outline:none;

cursor: pointer;

}