Object Oriented CSS is a new way to write CSS files to speed up development by using parent relations and variable storage.
Nothing is easy to explain without an example, so I've included the stylesheet used on this page below.
Unparsed styles.oocss
/**
* Object Oriented CSS 2.0
* September 5, 2009
* Corey Hart @ http://www.codenothing.com
*/
/* Variables */
$pageFontSize = font-size: 10pt;
$links = {
color: blue,
text-decoration: none
};
$code_wrapper = {
display: block,
border: 1px dashed #595959,
height: 200px,
background-color: #f1f1f1,
overflow: auto,
width: 500px,
margin: 0 0 40px 0,
font-size: 9pt
};
/* Styles */
body {
$pageFontSize;
margin: 0;
padding: 0;
}
pre {
$code_wrapper;
margin-left: 15px;
}
h4 {
background-color: #989898;
padding: 5px;
margin: 0;
width: 600px;
color: white;
}
p > {
/* p Attributes */
width: 600px;
padding-left: 10px;
/* Child */
code {
display: block;
border: 1px dashed #595959;
background-color: #f1f1f1;
overflow: auto;
margin: 15px;
padding: 5px;
font-size: 9pt;
}
}
table {
/* Table Attributes*/
margin-top: 20px;
/* Descendents */
pre { $code_wrapper; }
iframe { $code_wrapper; }
td {
> a { $links; }
}
}
#warning {
display: none;
}
#footer > {
font-size: 9pt;
margin: 40px 0 0 10px;
a { $links; }
}
|
Parsed styles.oocss |
OOCSS takes what would normally be a painfully large, unintuitive style sheet, and turns it into less code for better maintenance. All parsed scripts are cached server side.
OOCSS can parse both single and multiple definition varaibles. Single definition varibales
must follow the following pattern:
$var = prop:value;
You can think of multiple definitions as an array. The array must be be enclosed
in brackets trailed by a semi-colon, with each definition seperated by a comma. Ex:
$multi_var = { prop1:value1, prop2:value2, prop3:value3 }
When using a variable, they must be followed by a semi-colon, or they will not be replaced
with their values.
The file is parsed like a DOM Tree, where inner elements are considered children of the wrapped element. If you set the OOCSS_DEBUG_MODE defined variable to true, you can get a better picture of what variables are being stored, and how the tree looks. Here's what this pages stylesheet tree looks like:
Tree Parsed: Array
(
[body] => Array
(
[props] => Array
(
[0] => font-size: 10pt;
[1] => margin: 0;
[2] => padding: 0;
)
)
[pre] => Array
(
[props] => Array
(
[0] => display: block;
[1] => border: 1px dashed #595959;
[2] => height: 200px;
[3] => background-color: #f1f1f1;
[4] => overflow: auto;
[5] => width: 500px;
[6] => margin: 0 0 40px 0;
[7] => font-size: 9pt ;
[8] => margin-left: 15px;
)
)
[h4] => Array
(
[props] => Array
(
[0] => background-color: #989898;
[1] => padding: 5px;
[2] => margin: 0;
[3] => width: 600px;
[4] => color: white;
)
)
[p >] => Array
(
[props] => Array
(
[0] => width: 600px;
[1] => padding-left: 10px;
)
[code] => Array
(
[props] => Array
(
[0] => display: block;
[1] => border: 1px dashed #595959;
[2] => background-color: #f1f1f1;
[3] => overflow: auto;
[4] => margin: 15px;
[5] => padding: 5px;
[6] => font-size: 9pt;
)
)
[a] => Array
(
[props] => Array
(
[0] => color: blue;
[1] => text-decoration: none ;
)
)
)
[table] => Array
(
[props] => Array
(
[0] => margin-top: 20px;
)
[pre] => Array
(
[props] => Array
(
[0] => display: block;
[1] => border: 1px dashed #595959;
[2] => height: 200px;
[3] => background-color: #f1f1f1;
[4] => overflow: auto;
[5] => width: 500px;
[6] => margin: 0 0 40px 0;
[7] => font-size: 9pt ;
)
)
[iframe] => Array
(
[props] => Array
(
[0] => display: block;
[1] => border: 1px dashed #595959;
[2] => height: 200px;
[3] => background-color: #f1f1f1;
[4] => overflow: auto;
[5] => width: 500px;
[6] => margin: 0 0 40px 0;
[7] => font-size: 9pt ;
)
)
[td] => Array
(
[> a] => Array
(
[props] => Array
(
[0] => color: blue;
[1] => text-decoration: none ;
)
)
)
)
)
To prevent long loads, parsed files are cached into a seperate directory. The files are stored using a combination of both oocss.php and your oocss last change times, so you can be assured that any changes made will be automatically parsed.