Automated Analysis of CSS Rules

to Support Style Maintenance

Ali Mesbah

University of British Columbia

Canada

amesbah@ece.ubc.ca

Shabnam Mirshokraie

University of British Columbia

Canada

shabnamm@ece.ubc.ca

SECTION TITLE | 2

Outline

• Overview

• CSS Background

• Challenges & Motivation

• Approach

• Tool Implementation – CILLA

• Evaluation

• Limitations

• Applications

• Conclusion

SECTION TITLE | 2

• An empirical study to validate the proposed technique, demonstrating its

efficacy and real-world relevance.

Overview CSS is a widely used language for describing

the presentation semantics of HTML elements

on the web.

This paper talks about the following -

• A discussion of challenges surrounding

CSS rule comprehension and

maintenance

• A fully automated technique and algorithms

for inferring knowledge about actual style

code coverage and selector effectively

• An open-source tool CILLA for

implementing the analysis technique and

algorithms

SECTION TITLE | 2

CSS Background CSS is a language for defining the presentation

semantics of HTML elements, including their

positioning, layout, color, and fonts.

It separates structure from presentation.

It supports number of characteristics such as

inheritance, cascading, and selector specificity.

As a web application evolves, unused rules or

ineffective ones with properties that are always

overridden start to accumulate over time.

Developers are continuously faced with

challenging questions during web development

and maintenance tasks

• Is my web application using all of the de-fined CSS rules? Which ones are

obsolete?

• What will happen if this CSS rule is removed?

• Is this selector really effective or is it overridden by another rule at runtime?

• Which DOM elements does this rule affect?

• Are there any undefined classes in the HTML code

SECTION TITLE | 2

CSS Mechanisms

The language provides three mechanisms for selecting DOM elements:

Element selectors are defined by using DOM element types; e.g., P{color:

blue} selects any <P> element with or without attributes.

ID selectors are defined by using the‘#’prefix and are matched based on the

value of the ID attribute of DOM elements; e.g., #news{background-color:

silver}selects<P id="news" ...>.

Class selectors are defined by using the ‘.’prefix and are matched based on

the value of the class attribute of DOM elements; e.g.,.sports{color: blue}

selects<SPAN class="sports">.

SelectorsProperties

ElementSelectors

IDSelectors

ClassSelectors

Inheritence in CSS Inheritance:

• Inheritance in CSS allows a styling

property value to be propagated

from the parent to the descendent

elements.

Example:

• The SPAN element inherits the

background color property (silver)

from its parent element P, through

the CSS rule #news.

• An inherited property can also be

overridden in CSS.

• For instance, the same SPAN

element has a parent with a font

color of black, but since there is a

more specific color property

defined for the element through

#news span, the value of the

inherited property is overridden by

red. Output DOM 1:

CSS code:

SECTION TITLE | 2

Location is determined by the source of a CSS rule and its position. CSS rules

can be defined in three different sources:

Inline

• Inline declarations are defined on specific HTML elements using the style

attribute

Embedded

• Embedded rules are defined inside a <STYLE>element within an HTML

document’s header

External style sheets

• External style sheets are separate files, usually with a .css

extension, referenced from HTML documents.

Cascading in CSS - Location

Cascading in CSS - Specificity Cascading and Specificity.:

• The cascading notion in CSS

ultimately determines which

properties will be applied to a

selectable DOM element

• It is based on two main concepts:

specificity and location.

Specificity:

• CSS provides different selector types

to target DOM elements and each of

these types carries a different weight

of importance.

Example:

• #news span and .latest selectors

compete for the <SPAN

class=’latest’> element’s color

property. #news span wins because it

is more specific about the element

(i.e., it specifies both the tag name

and the parent’s ID), and thus the

DOM element receives a red color

CSS code:

Output DOM 2:

SECTION TITLE | 2

As a web application evolves, unused rules or ineffective ones with properties

that are always overridden start to accumulate over time.

This accumulation of unused code has a number of negative consequences:

• CSS code, needs to be downloaded and parsed by the browser to load a

web application. The larger the code, the higher the load on the network,

server and browser.

• Visual layout consumes 40-70% of the average processing time.

• Matching unused selectors is an unnecessary overhead, which can

significantly increase the loading time of a web page and decrease the level

of responsiveness.

• Unused code adversely influences program comprehension, maintainability,

and ultimately code quality by increasing the probability of introducing

errors.

CSS Negative Consequences

SECTION TITLE | 2

• Even in the simple example, with only two DOM states and a few lines of CSS

code, it is not trivial to understand how the rules are applied to the DOM

elements.

• Having to work on a web project with thousands of lines of CSS code and

hundreds of DOM states can thus be very challenging.

• The aim in this work is to provide a technique that can automatically provide the

developer with information on CSS rule usage.

• The authors have categorize their related work into two groups, namely CSS

analysis and unused code detection.

Challenges and Motivation

SECTION TITLE | 2

The authors propose a technique that automatically:

1. Checks CSS code against different DOM states and their elements to infer

an understanding of the runtime relation-ship between the two.

2. Detects unmatched and ineffective rules, overridden declaration

properties, and undefined class values.

3. Implements the technique in an open source tool called CILLA.

4. The results of the evaluation show that CILLA has a high precision and

recall rate of retrieving unused CSS code.

Approach is based on dynamic analysis in which we automatically drive a given

web application and infer the runtime relationship between the CSS rules and

DOM elements of the navigated states.

We use this inferred relational knowledge to spot unused CSS selectors.

Approach

SECTION TITLE | 2

• Set AS represents all the CSS selectors present in a web application.

• Set US is the set of unmatched selectors, i.e., selectors with no DOM element

counterparts.

• The set AS-US contains all the matched selectors.

• Set IS encompasses all the ineffective ones, i.e., the selectors that are matched

but have no effect on the DOM elements.

• Set ME is the set of all matched and effective selectors.

• Ideally, after each development and maintenance cycle, the CSS code should

only contain the set of selectors in ME

Landscape of a CSS selector

SECTION TITLE | 2

Our technique operates in three steps to detect unused selectors and undefined

class values:

• In the first step, we execute each selector against all DOM states to

differentiate unmatched selectors (US).

• In the second step, the matched selectors (AS-US) and DOM elements

are analyzed to detect the set of ineffective selectors (IS).

• The output of our technique as far as the total unused selectors is

concerned is the set US union IS.

• In the last step, we use the matched selectors to spot these undefined

class values.

Technique

SECTION TITLE | 2

Step1: Relation between CSS and DOM

Extract all the new CSS rules

Add them to the overall set of CSS rules

Scan each new DOM tree looking for

unexamined embedded rules and

external CSS files.

Parse the CSS and transform into an

object model

Iterate over the set of selectors of the current

rule

Check whether a selector matches any

DOM elements

Transform the selector into a corresponding

XPath expression

Annotate the selector as matched and add

the retrieved elements to the overall set of selectable elements

Iterate over all the rules to find the set of unmatched selectors

SECTION TITLE | 2

Algorithm

Step1

SECTION TITLE | 2

Step2: Effective Selectors and

Declaration PropertiesRetrieve all the

corresponding CSS selectors that matched that

particular element

Sort the list of matched selectors decreasing order of specificity weight

Calculate the overall specificity weight

(SW) of a selector S

Iterate over the set of selectors of the

current rule

Check whether a selector matches any

DOM elements

Annotate the properties in that

exact order

Checks whether the property has already been overridden by a higher order property

If that is not the case, the property is

marked as EFFECTIVE

Competing selectors of same property

name are marked as overridden

Distinguish between effective and

ineffective properties

Iterates over all the annotated rules and

selectors

Add selector to set of ineffective selectors if

none of selector properties is marked

as EFFECTIVE

SECTION TITLE | 2

Algorithm

Step2

SECTION TITLE | 2

Step3: Detecting Undefined Classes

Extract all the new CSS rules

Class attributes of all nodes are retrieved

Each class value is then subsequently checked against all

the selectors

If selector matches the class value, add

the class to the set of defined classes

Iterate over all the classes

Return the set of undefined classes

SECTION TITLE | 2

Algorithm

Step3:

SECTION TITLE | 2

What is CILLA:

• An open source tool for CSS analysis technique.

• CILLA uses CSSPARSER to parse CSS source code and transform the

rules into a DOM 2 Style tree.

• For automating the DOM state exploration phase, CILLA uses CRAWLJAX.

Implementation:

• First, CILLA extracts all external and embedded CSS sources.

• Then it retrieves and parses the CSS code to create a map of all the CSS

rules, selectors, and property declarations associated with each source.

• Each rule’s relation to the elements of the current DOM tree is examined

and the map is annotated with the findings.

• Then the class attributes of all the elements on the DOM tree are analyzed.

• CILLA currently excludes pseudo elements/classes from the analysis

process, because inherently their relation cannot be deduced from the

DOM tree.

Tool Implementation

SECTION TITLE | 2

Evaluation addresses the following research question:

• RQ1: What is the overall accuracy of CILLA in detecting unused CSS code?

• RQ2: How does CILLA’s detection rate compare to existing approaches?

• RQ3: What percentage of CSS code is typically unused in online web-

based systems?

Compare the results produced by CILLA to the results generated by two

industrial open source tools, namely Dust-me Selectors (DMS) and CSSESS.

Both Dust-me Selectors (DMS) and CSSESS are used for spotting unused CSS

rules.

Same set of randomly selected experimental objects are used to conduct the

comparisons through precision, recall, and F-measure.

Since CILLA, DMS, and CSSESS are not able to analyze pseudo

classes/elements, we ignore pseudo items in the evaluation of all the three tools

Evaluation

SECTION TITLE | 2

Experimental Objects Used

SECTION TITLE | 2

To evaluate the accuracy of reported unused CSS selectors (RQ1), we measure

precision, recall, and F-measure as follows:

where TP(true positives), FP(false positives), and FN (false negatives)

Goal is to get high precision and recall rate to achieve higher accuracy.

Experimental Setup

SECTION TITLE | 2

Characteristics of the

Experimental Objects

SECTION TITLE | 2

Results

SECTION TITLE | 2

Findings – Accuracy (RQ1)

RQ1 is concerned, our

results show that

CILLA is highly

accurate in detecting

unused CSS

selectors.

The recall is

100%, meaning that

our approach can

successfully spot all

unused selectors of

type class, ID, and

element, present in a

web application.

The precision

oscillates between 80-

100%, which is

caused by a low rate

of false positives

SECTION TITLE | 2

Findings – Unused CSS Code (RQ3)

RQ3 is concerned, results show that by increasing the number of DOM states

covered, we find out the number of detected unused selectors as well as the

percentage stabilize.

The percentage of unused selectors oscillates when we increase the number of

explored DOM states from 10 to 50 and then reaches a steady state.

High percentage figures clearly indicate that there is a huge amount of unused

CSS code in online web applications.

SECTION TITLE | 2

Limitations

CILLA currently excludes pseudo elements/classes from the analysis

process, because inherently their relation cannot be deduced from the DOM

tree.

Any unused pseudo item that is ignored could be regarded as a false negative.

The explored state space is only a subset of the entire state space.

It means if a CSS selector is used in a certain DOM state not present in the

explored set, then that selector is mistakenly marked as ‘unused’.

SECTION TITLE | 2

Applications

CSS code maintenance

Report unused code

Maintain a clean code base

Decrease the processing load on the browser.

Mobile web applications could greatly benefit by avoiding the download of

unnecessary CSS code to decrease bandwidth usage and user-perceived

latency

SECTION TITLE | 2

Conclusion

Proposed an automated approach for analyzing the relation between CSS

rules and DOM elements of web applications.

Implemented in a tool called CILLA which is capable of detecting unmatched

and ineffective selectors and properties as well as undefined class values.

On average we found 60% unused selectors and 52% unused properties.

Results also demonstrate the efficacy of the approach in automatically

detecting unused CSS code (100% recall and 80-100% precision).

SECTION TITLE | 2

Thank you!