CSS or xCSS

CSS is used to style Web pages and has some basic design limitations stopping CSS from being the perfect styling tool. xCSS is an additional complication that adds some advantages and some disadvantages.

You can read about xCSS at http://xcss.antpaw.org/. xCSS is both a programming language used to generate CSS and a program to compile the xCSS into CSS.

CSS is a typical programming or control language grown through several generations in an attempt to satisfy the need to easily style Web pages without locking the formatting into a page. You use XHTML or the older HTML to describe the structure of your Web page then use CSS to add style. The CSS can be in an external file shared across several Web pages or a whole Web site. The big problems with CSS are design limitations that force you to duplicate styling information.

xCSS is CSS with added features to reduce some types of duplication. Looking at real examples of CSS generated by xCSS, xCSS does not reduce duplication in the CSS file, xCSS only reduces duplication in your XCSS file. The final CSS file has the same level of duplication as the CSS you would generate by hand or using any one of the many CSS editors.

xCSS does not reduce the overhead of the CSS file downloaded with the Web page. Several of the xCSS CSS files show xCSS generating CSS that is more wasteful than the CSS we make by hand.

xCSS adds features based on other programming languages and those features do make some parts of CSS generation more intelligent. Unfortunately the resulting CSS is the opposite of intelligent and has features that make diagnosis of problems harder. If you were to ask me to help you fix the CSS in a theme, the first step would be to scrap the xCSS and work direct on the CSS.

xCSS lets you use variables to solve the CSS problem of putting the same value into multiple CSS statements. xCSS lets you use mathematics to calculate relative values for those occasions when you do not want to use the proper CSS methods for laying out pages. Using the two together lets you calculate the page layout at the top of the CSS then use variables to spread the results out through your CSS. In theory you could change the page layout based on the window size. It would not resize when the user resizes the Window, you use jQuery for that.

If the Javascript was replaced by pure PHP code in a Drupal module, you could alter the page layout and styling based on input from other modules. The Drupal Color module is an example of a smarter way to perform the transformation.

xCSS uses Javascript and PHP to compile xCSS into CSS. You then need an add-on module for your content management system to add xCSS in a logical way. There is an xCSS add-on module for Drupal to convert xCSS to CSS at page generation time. A better approach, to cut down the processing overheads, would be to compile the xCSS into CSS at the theme development stage.

Conclusion

The xCSS extra features do not solve the major problems of CSS diagnosis and makes some problems more difficult. Using xCSS requires extra work and it does not reduce the critical download time. If parts of xCSS were added to a good CSS editor or something similar to the Drupal Color module, those parts of xCSS would be useful.