ExtCSS: A Preprocessor For Cascading Style Sheet

In the development of Web application, CSS development and maintenance is a tough task. Through the investigation of63developers from web rebuilding industry, the author summarizes the main problems existing in current CSS development, according to the statistics. They are poor reutilization of CSS, the lack of automation function of CSS and inconsistency in parse among different browsers. To solve these problems, the author designs the high-level programming language ExtCSS,which is based on the CSS (Cascading Style Sheets) language and extends the original CSS syntax. The purpose of ExtCSS is to improve the efficiency of developing and maintaining the CSS code. At the same time, the author realizes ExtCSS language processor to translate the ExtCSS code into the CSS code. Finally, we adopt empirical evaluation to conduct experiment and verify that the use of ExtCSS reduce the time needed to develop and maintain tasks, compared to CSS.In order to allow the developer to get started with ExtCSS programming language at a lower cost, we design ExtCSS as a super set of CSS. That is, it is compatible with the existing CSS3standard. Secondly, in order to improve the maintainability of the CSS code, ExtCSS designs the syntax of variable, function and nesting, which contribute to better readability and maintainability. The syntax of ExtCSS use for reference the popular Web programming language. The naming rules of variables refer to the Linux Shell and the PHP, while the ideas of scope comes from Javascript.Before releasing Web applications, performance optimization is often requisite. As for optimization related to CSS, it mainly includes CSS Sprite and code compression. At this stage, designs of automated functions of the CSS Sprite and compression/decompression can save the spending of efficiency.ExtCSS processor is written in Java language and it can run on different operating systems. It use the Junit do unit testing tools, and generating a parser by ANTLR, which is open source. We design two experiments on ExtCSS. In the first experiment, we crawl all the CSS file of the web site listed in the hao123homepage. We then verify the compatibility between ExtCSS and CSS syntax through the successful parse of all the CSS file using the ExtCSS processor. In the second one, we adopt empirical evaluation.to conduct experiment, involving participants from both academia and industry who does web rebuild. Finally, through three developing tasks, we verify from the experiment result that the use of ExtCSS improve the efficiency of developing and maintaining, compared to CSS.Also, ExtCSS has been applied to actual development of web applications.