The question is: can CSS stylesheet be applied in the server-side ? And if yes, would would be the purpose ? I should say yes, they can and i would explain how and why. So what for are stylesheets ? “Applying cascading styles onto the DOM” may be the answer. But i would focus more on that why actually stylesheets are used for such purpose?
- Because they are clean ?
- Because CSS selectors do so much job, that besides them only really needed things are simple properties with obligatory number of arguments ?
- Because cascading inheritance is just right for the DOM ?
- CSS selector are simply benefiting from DOM structure’s nature
So first thing which needs to be implemented on the server is the DOM. When we already got it, so we can query it thou selector, that’s the first half. Now the properties. What could be the property on the server ? border-color ? Rather not. Do we need to style the DOM on the server ? Is it shown anywhere ? Not right now. On the server, page’s DOM is being build. Typically by various ways of string concatenation.
So if we need to build a DOM and same time we can query it with selectors, then the style’s properties should build / modify it’s structure. For example, show some articles or blog posts on the page. So here is pure CSS parser-validable code with some proposed server properties.
.section.articles ul > li {
/* loop "articles" variable as "article" using "num" as index
after that remove all other-than-first LIs */
loop-one: articles num article;
/* apply filter method on next variable output */
vars-filter: htmlentities;
/* use "article" fields and populate them inside nodes
matched by ".a-%k" where %k is field name, eg .a-title */
vars-to-selector: articles var(articleFields) null ".a-%k";
/* example custom method to adding class for 1st loop node using index "num" */
add-class-to-first: num custom-class;
}
/* show .comments node if variable articleComments is true */
.comments {
if-var: articleComments;
}
/* bubbled event */
.section.articles:inserted {
/* another custom method */
/* null means 0 arguments */
strip-tables: null;
}
So what have we done here ?
- We simply build articles loop which prints it’s contents into proper child nodes automagically. It could have 3 fields or 345, but line in CSS is only one.
- We’ve also used a custom method do add class basing on the loop position.
- Comments presentance is conditional.
- One Mutation Event is used. Hidden in :insert pseudoclass, really named DOMNodeInserted will apply on all new nodes which matches prior selector and were just inserted into the DOM structure.
- Each unspecified event defaults to :load.
All properties should be simply methods which applies something on all matched nodes. Sound familiar ? That’s exactly what many of jQuery methods are doing. Take a look:
.section.articles {
remove-class: section;
attr: rel section;
/* all css properties can be used
but will result in inline "style" attributes */
css: padding 2px;
}
/* this rule applies to all load-time nodes
and the new one too */
.change-me,
.change-me:inserted {
text: "changed innerText";
prepend: "
<div>changed</div>
";
remove-class: change-me;
/* reallocation, interesting... */
insert-into: ".content";
/* passing some data to forward ? */
data: some-flag "some value for developer";
}
All from above properties are jQuery methods. Possibilities are huge. But let’s stick with simple things right now. How would it benefit ? Who will write those server-css-sheets ? I should say…
Read the rest of this entry »