Discovering refactoring opportunities in cascading style sheets

Abstract

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of HTML documents. CSS has been widely adopted in web and mobile development practice, since it enables a clean separation of content from presentation. The language exhibits complex features, such as inheritance, cascading and specificity, which make CSS code hard to maintain. Therefore, it is important to find ways to improve the maintainability of CSS code. In this paper, we propose an automated approach to remove duplication in CSS code. More specifically, we have developed a technique that detects three types of CSS declaration duplication and recommends refactoring opportunities to eliminate those duplications. Our approach uses preconditions that ensure the application of a refactoring will preserve the original document styling. We evaluate our technique on 38 real-world web systems and 91 CSS files, in total. Our findings show that duplication in CSS code is widely prevalent. Additionally, there is a significant number of presentation-preserving refactoring opportunities that can reduce the size of the CSS files and increase the maintainability of the code.

Cascading Style Sheets Code Duplication FSE

Downloads

  • The paper can be downloaded here.
  • The raw data of the crawled webpages can be found here. Note that, this does not include refactored version of CSS files, you should run the tool to get the refactored versions.
  • Download the CSV file containing the values for the measurements in the paper here.
  • The tool can be found on GitHub.
  • R scripts for generating paper’s plots can be found here.
  • List of the analyzed websites is shown by clicking here.

BibTex

@inproceedings{Mazinanian:2014:DRO:2635868.2635879,
  author = {Mazinanian, Davood and Tsantalis, Nikolaos and Mesbah, Ali},
  title = {Discovering Refactoring Opportunities in Cascading Style Sheets},
  booktitle = {Proceedings of the 22Nd ACM SIGSOFT International Symposium on Foundations of Software Engineering},
  series = {FSE 2014},
  year = {2014},
  isbn = {978-1-4503-3056-5},
  location = {Hong Kong, China},
  pages = {496--506},
  numpages = {11},
  url = {http://doi.acm.org/10.1145/2635868.2635879},
  doi = {10.1145/2635868.2635879},
  acmid = {2635879},
  publisher = {ACM},
  address = {New York, NY, USA},
  keywords = {Cascading style sheets, duplication, refactoring},
}