Cascading Style Sheets (CSS) is the standard language for styling structured documents, such as HTML. However, CSS lacks most of the traditional programming constructs, including variables and functions, which enable code reuse and structured programming. Alternatively, CSS Preprocessors (e.g., LESS, SASS) have been introduced as superset languages to extend CSS by supporting those missing constructs. While these languages are being widely used by developers, we do not have sufficient knowledge about how developers take advantage of the features they provide. Gaining this knowledge is crucial for providing better tool support to the developer community by devising techniques for the automatic migration of existing CSS code to take advantage of CSS Preprocessor language features, designing refactoring recommendation systems for existing Preprocessor code, and giving insights to the Preprocessor language designers for improving language usability. In this paper, we have empirically investigated the CSS Preprocessor codebase of 150 websites regarding four preprocessor features, namely variables, nested selectors, mixins and extend constructs, and report the discovered usage patterns for each feature. We also discuss how the gained knowledge can be put into practice towards improving the development and maintenance of CSS preprocessor code.
- The paper can be downloaded here.
- The analyzed Less files can be downloaded here.
- The analyzed Sass files can be downloaded here.
- The analyzed SCSS files can be downloaded here.
- The collected data (as pipe-separated files) can be downloaded here.
- The Ruby code used for collecting information from Sass/SCSS files can be downloaded here.
Please note that you will need to have the
Sasscode in a folder called Sass besides the given
Sass-Empiricalfolder. We used Sass version 3.4.19. Run the code with two parameters: 1) the path to the output folder, and 2) the path to the folder in which you have all the folders with Sass/SCSS files (probably one folder for each web site). The tool will recursively search for a file called
mainfiles.txtin each folder. This file contains the list of all preprocessor files (one file per line) inside the same folder, which are the main files for generating the CSS files (i.e., the files which probably import other files).
- The Java code used for collecting information from Less files is included in our tool which can be downloaded here. Run it (
ca.concordia.cssanalyser.app.CSSAnalyserCLI) with these params:
--mode:empirical_study --outfolder:OUT/FOLDER --infolder:IN/FOLDER, where
OUT/FOLDERis the path to the output folder and
IN/FOLDERis the path to the input files. The tool will do the same thing as the Sass/SCSS code for finding and analyzing Less files.
- R scripts used for analysis and generating paper’s plots can be found here (This is an R Studio project). Note that, first you will need to modify the
pathToCSVsvariable in the
load.Rfile to point to the folder containing all pipe-separated files. Then source this file to get all the functions necessary for analyzing the data.