Automated analysis of CSS rules to support style maintenance

CSS is a widely used language for describing the presentation semantics of HTML elements on the web. The language has a number of characteristics, such as inheritance and cascading order, which makes maintaining CSS code a challenging task for web developers. As a result, it is common for unused rules to be accumulated over time. Despite these challenges, CSS analysis has not received much attention from the research community. We propose an automated technique to support styling code maintenance, which (1) analyzes the runtime relationship between the CSS rules and DOM elements of a given web application (2) detects unmatched and ineffective selectors, overridden declaration properties, and undefined class values. Our technique, implemented in an open source tool called Cilla, has a high precision and recall rate. The results of our case study, conducted on fifteen open source and industrial web-based systems, show an average of 60% unused CSS selectors in deployed applications, which points to the ubiquity of the problem.

I. Introduction

One of the fundamental W3C standards for developing web applications is Cascading Style Sheets (CSS) [1]. CSS is a language for defining the presentation semantics of HTML elements, including their positioning, layout, colour, and fonts. The main driving force behind adopting CSS has been the separation of structure from presentation. Although this separation of concerns helps a web application's evolution as far as the structure and content is concerned, the CSS code itself is not easily maintainable [2], [3].