The idea sounds good, but it will probably be a bit of work, and beyond 1 single answer. But this is how I would approach it.
Have a database storing the current selectors, properties, and values.
Such as :
selector | property | value
---------+----------+----------
div | color | #FFFFFF
div | float | left
etc, etc...
On a user submitting a change, do the following things
1 - Update the row in the database, for example if I, the user, changes the div to #440044, then update the row so it reads as such:
selector | property | value
---------+----------+----------
div | color | #440044
div | float | left
2 - Using PHP (or your choice of server side language) pull the contents of the database, organising by selector, using a mySQL query along the lines of:
$query = 'SELECT * FROM css ORDER BY selector';
3 - Loop through these values, grouping them into an array of arrays like this:
$css_array = array();
foreach($rows as $row) {
if( ! array_key_exists($row['selector'], $css_array)) {
$css_array[$row['selector']] = array();
}
// push each value onto the sub array
$css_array[$row['selector']][] = $row['property'] . ':' . $row['value'];
}
This will leave you with an array of arrays - each sub array representing an element of the css
array(
'div' => array(
'color:#440044',
'float:left'
),
'h1' => array(
'font-size:16px'
)
);
4 - Using this array, and the implode method, create a massive string, like:
foreach($css_array as $key => $value) {
$s .= key . '{';
$s .= implode(';
', $value);
$s .= key . '}';
}
5 - This should leave you with a string that looks like a normal css sheet. Write this to a file called style.css or similar using the fopen, etc functions in PHP.
