/ Research in everyday life / A tool for better website coding
Research capsule

A tool for better website coding

The art of web development is continuously evolving. Major advances include CSS (Cascading Style Sheets), a mechanism for formatting the layout of web pages. Among other things, CSS makes it easy to manage line spacing, paragraph spacing and indentation, font colour, font size and style, and adaptation to different screen formats of devices. Although CSS code is far more flexible than HTML for styling a website, it does have certain limitations. Nikolaos Tsantalis, a professor in the Department of Computer Science and Software Engineering at Concordia University, has developed a tool to address these shortcomings.

60% of style sheets consist of code repetitions, making maintenance difficult.

CSS does not allow the use of variables[1] or functions to edit specific blocks of code across the website, for example, the style of news headlines. This must be done by copying and pasting styles. After examining many private and public websites, Professor Tsantalis observed that 60% of style sheets consist of code repetitions, making maintenance difficult.

To work around this problem, website developers use preprocessors, which add a variety of features such as functions to CSS code. Unfortunately, web browsers are unable to read preprocessor code, which must be translated into CSS code.

Nikolaos Tsantalis has developed CSSDev, a tool suite that analyzes CSS code to detect duplications and recommends how to transform or eliminate them without causing changes to the website’s presentation. It then compiles the code into CSS format that can be read by web browsers.

For now, this tool and the many data sets generated by the project are being used by other research groups seeking to simplify website maintenance. Professor Tsantalis reckons that CSSDev will reach maturity within two or three years, long enough to make it even more powerful!

[1] In computer science, variables are a way of naming information for later usage. We can think of variables as labeled storage locations that help programs to retrieve data.