Automated and Semantics-Preserving CSS Refactoring Marti Bosch, Pierre Genevès, Nabil Layaïda
To cite this version:
Marti Bosch, Pierre Genevès, Nabil Layaïda. Automated and Semantics-Preserving CSS Refactoring. 2014. hal-01081876v1
HAL Id: hal-01081876 https://hal.inria.fr/hal-01081876v1 Preprint submitted on 12 Nov 2014 (v1), last revised 13 Jan 2015 (v2)
HAL is a multi-disciplinary open access L’archive ouverte pluridisciplinaire HAL, est archive for the deposit and dissemination of sci- destinée au dépôt et à la diffusion de documents entific research documents, whether they are pub- scientifiques de niveau recherche, publiés ou non, lished or not. The documents may come from émanant des établissements d’enseignement et de teaching and research institutions in France or recherche français ou étrangers, des laboratoires abroad, or from public or private research centers. publics ou privés. Automated and Semantics-Preserving CSS Refactoring
∗ Martí Bosch Pierre Genevès Nabil Layaïda UPC & Inria CNRS Inria [email protected] [email protected] [email protected]
ABSTRACT Categories and Subject Descriptors The Cascading Style Sheets (CSS) language constitutes a 1.7 [Document and Text Processing]: Document prepa- key component of web applications. It offers a series of ration; D.2 [Software Engineering]: Testing and Debug- sophisticated features to stylize web pages. Its apparent ging simplicity and power are however counter-balanced by the difficulty of debugging and maintaining style sheets, tasks for which developers still lack appropriate tools. In partic- Keywords ular, significant portions of CSS code become either useless Web development, Style sheets, CSS, Debugging or redundant, and tend to accumulate over time. The situa- tion becomes even worse if we consider that more and more 1. INTRODUCTION complex features are added to the CSS language (e.g. CSS3 Cascading Style Sheets (CSS) [6, 14] is a style sheet language powerful selectors). A direct consequence is a waste of re- used to format documents written in markup languages, and sources such as bandwidth and CPU that are required to nowadays it is widely used to style web pages. To suit the display web pages. Since each web page access may involve current context, where there is so much attention paid to CSS code transfer and interpretation, the cost of ill-designed the user experience in different kinds of devices, it includes CSS code represents a significant amount of useless traffic a series of sophisticated features that offer a very wide range and processing at web scale. of possibilities to designers and developers.
Style sheets are designed to operate on a class of documents Despite its widespread use and increasingly important role, (possibly generated). However, existing techniques consist CSS received very little attention from the research commu- in syntax validators, optimizers and runtime debuggers that nity [22, 15] with the notable exceptions of [7, 17]. Develop- operate for one particular document instance. As such, they ers tend to be misled by the simplicity of its syntax, which do not provide guarantees concerning all web pages in CSS hides the complexity of its most advanced aspects. This of- refactoring, such as preservation of the formatting. This is ten results in a code that is very hard to maintain. This partly because they are essentially syntactic and do not take also leads to redundant declarations and inaccessible selec- advantage of CSS semantics to detect redundancies. tors, that unnecessarily (1) increase resources required to transfer the CSS files (and therefore web traffic at a global We propose a set of automated refactoring techniques aimed scale) as well as (2) slow down the browser rendering of the at removing redundant and inaccessible declarations and page layout [18] with redundant or useless computations, in rules, without affecting the layout of any document to which particular, on mobile devices. Current syntax optimizers1 the style sheet is applied. We implemented a prototype of perform syntactic analyses, while being unaware of the CSS our analyses that has been extensively tested with popular semantics. As a result, they only partly solve (1), while web sites (such as Google Sites, CNN, Apple, etc.). We show losing the style sheet’s readability. Recent CSS preproces- that significant size reduction can be obtained while preserv- sors2 offer more advanced ways to deal with (1) but they ing the code readability and improving maintainability. accentuate (2), which is an issue nowadays, as handheld de- 1234 213 vices suffer especially from (2) due to their limited CPU and ∗ Detailed affiliation of authors: M. Bosch , P. Genev`es , N. 123 1 2 3 Laya¨ıda with: Inria; CNRS, LIG; Univ. Grenoble Alpes; battery resources. 4Universitat Polit`ecnica de Catalunya. Work partly supported by ANR project Typex (ANR-11-BS02-007). The use of empirical methods such as runtime debuggers is a common practice. While debuggers are useful in testing, they depend strongly on the document instance on which the style sheet is applied. This can induce unintended in- consistencies, as style sheets usually apply to a wider set of documents. Modifications achieved on a particular in- stance might undesirably alter the presentation the other
1Several tools available on line: http://www.cleancss.com/, http://www.codebeautifier.com/, http://csslint.net/, etc. 2Less http://lesscss.org/, Saas http://sass-lang.com/ documents. On the other hand, CSS code very often comes 2.1 Selectors from different sources, such as external files, declarations CSS selectors basically consist in a sequence of simple selec- stated under the HTML’s style element, or inline styles set tors separated by combinators. We review them below. directly as attributes on specific elements. This makes it hard to spot the origin of bugs, and makes the developers A universal selector matches any single element in the spend significantly long dynamic debugging sessions in the document tree. It is noted by an asterisk character *. If it browser to fix them. is not the only component of a selector, it may be omitted. For example “*.menu” may be noted as “.menu”. A type selector matches all the instances of the element Contributions. We propose a set of novel automated refac- type. For example “h1” matches all h1 elements in the doc- toring techniques aimed at removing redundant and inacces- ument tree. sible CSS declarations and rules, while preserving the layout of the documents to which the style sheet is applied. Our Together with simple selectors, CSS permits as well the analyses take advantage of the semantics of CSS, and can styling of HTML elements based on the attributes that they be used in conjunction with other existing syntactic com- carry. pressors to achieve additional size reduction without losing readability. Our goal consists in both reducing resources re- Attribute selectors can match elements in three main quired for web traffic at a global scale, and saving device ways: (1) presence of the foo attribute “[foo]”, (2) presence resources by making browser rendering more efficient. We of the foo attribute with an exact value bar,“[foo="bar"]” implemented a prototype of our analyses and extensively or (3) certain substring matching in attribute values. tested them on popular web sites (such as Google Sites, CNN, Apple, etc.). We show that significant size reduc- Class selectors might replace attribute selectors for deal- tion can be obtained while preserving the code readability ing with the class attribute. They start with a dot, and and improving maintainability. are followed by the class attribute value. For example “[class="foo"]” might be rewritten as “.foo”. Id selectors select elements with an id attribute set to a Outline. We first introduce the CSS language in Section 2 certain value. In this case, the selector contains a sharp “#” while emphasizing its main principles and most important symbol followed by the id attribute value. As an example, features supported by our analyses. We then present a novel “[id="bar"]” might be replaced by “#bar”. refactoring method in Section 3. We describe the main im- plementation techniques that we used for developing a full To generate more complex navigational patterns, combina- prototype in Section 4. We report on experimental results tors describe structural relations between elements targeted that we obtained on popular websites in Section 5. We fi- by selectors. nally review related works in Section 6 before concluding in Section 7. A descendant combinator describes a descendant re- lationship between two elements, made by the whitespace 2. THE CSS LANGUAGE sign, such as “body p”. “Cascading Style Sheets was the first feature that was added A child combinator expresses a parent to child relation- to the initial foundations of the web (HTML, HTTP, and ship between two elements. In this case, a greater than sign URLs)” [7]. It plays nowadays a key role in the web infras- is used, for example “body > p”. tructure and in enhancing the user experience. The simplic- A sibling combinator describes either an adjacent or a ity of its syntax has attracted not only developers, but also general sibling relationship, respectively denoted by a plus graphical and web designers. CSS leverages on the principle and tilde characters, for example “p + ul” and “p ∼ ul”. of separation of content from presentation and a few rules are capable of producing impressively fancy presentations. A single selector is any pattern that can be created by the A style sheet C can be seen as a sequence of rules, where combination of simple selectors with combinators. each rule R consists of a selector S, and a set of declara- tions called declaration blocks. Selectors identify the set When the same declarations are shared between different of elements that are styled by the declarations Di. Each selectors, they might be grouped into a comma-separated declaration Di is a pair of a property Pi and its associated list of selectors meant to reduce the code size. For example, value Vi, that define how the elements selected by S will the rules “h1 { color: #666 }” and “h2 { color: #666 }” look like in the browser. The syntactic form of a CSS rule can be merged into one equivalent rule, written as “h1, h2 is illustrated in Figure 1. { color: #666 }”.
selector { In more recent versions, CSS also includes a series of fea- property1 : value1 ; tures that empower the language’s styling capabilities, such ... as pseudo-classes, that permit the selection of an element based on information that cannot be expressed using the propertyn : valuen ; | {z } other selectors. They consist on a colon “:” followed by the } declaration pseudo-class name and optional value, for example “a:nth- child(2)” matches only an a element that is the second Figure 1: Syntax of a CSS rule. child of a given parent element. On the other hand, pseudo- elements work like pseudo-classes, but they focus on styling only particular parts. They can start with a colon “:” or a Listing 1: Example of @media rule double “:” colon depending on the specification. For exam- ple, “p::first-line” selects only the first line of the para- 1 @media (min-width: 800px) { 2 p { graph element p. 3 text-indent: 5px 4 } 2.2 Cascading and Specificity ✝5 } ✆ A given element might be affected by several CSS rules, de- pending on their respective selectors. For such elements, if To adjust more precisely the style sheet scope, media queries the matching rules assign different values to the same ele- might use four different logical operators to connect different ment’s property, CSS uses the cascading algorithm to iden- expressions, which are: (1) conjunction: represented with tify which one will apply. The algorithm first determines the the keyword and, (2) disjunction: stated with a comma , origin of the declarations that assign different values to the character, (3) negation: using the keyword not, and (4) same element’s property. There are three possible origins exclusivity: with the keyword only. For example, “(min- for a declaration, that, in decreasing priority order, are: width: 480px) and hanheld” would require the device to have a width greater or equal than 480 pixels and be hand- 1. User: the user can define a custom style sheet to con- held. It is also important to be aware of the fact that media figure its web experience on all pages. queries do not alter the specificity. 2. Author: most of the time, the styling that we see is the one that the developer (author) has set for that document. 3. CSS REFACTORING TECHNIQUES 3. User-Agent: each browser has a basic style sheet that In this section, we introduce series of refactoring techniques provides a default presentation for any document. capable of identifying and deleting unaccessible declarations and combine rules in a way such that the same rendering If the cascading algorithm detects that the conflicting dec- semantics is preserved with lighter CSS files. These tech- larations have the same origin, it gives higher priority to the niques do not require any information other than the style declarations that have the !important specifier. In case of sheet itself, regardless of which instance is under considera- equality, CSS will pick the declaration whose selector has a tion. For this purpose, our methods rely on the semantics highest specificity. The specificity of a selector is represented of the CSS components described previously. In particular, by a four integer vector. In Selectors Level 3, [5] their com- our method aim at analysing and leveraging the fact that ponents are, from most to less important, determined as in CSS, rules use selectors that match the set of elements follows: (1) whether the property is declared directly under that are styled by the rule’s declarations. Our main method the style attribute or not, (2) the number of references to consists in the detection of semantic relations between CSS the id attribute with the # symbol, (3) the number of class selectors. When some of these relations are detected, fur- selectors, attribute selectors and pseudo-classes, and (4) the ther analysis of some CSS aspects might reveal that some number of element type selectors and pseudo-elements. In declarations are in fact unnecessary and need to be deleted. case of selectors with the same specificity, the latter rule in the syntactic order gets precedence. 3.1 Containment Between Selectors One fundamental relation between two selectors is the con- 2.3 Inheritance tainment relation. For example we say that “ul > li” is contained in “li” since any “li” element with an “ul” par- A CSS element with certain value set to a given property, ent is indeed a“li” element. Structural pseudo-classes and might propagate recursively this styling to its descendant the set of attributes carried by some element might as well elements. This mechanism is called inheritance, and helps induce containment relations between selectors. A selector avoiding to write repetitious declarations. For a specific such as “p.someclass” is contained into “p”, as any “p” ele- inherit property, the value can be set to to use it’s par- ment with “class” attribute “someclass” is indeed a “p” el- ent (or other ancestor) value. In fact, an important set of ement. On the other hand, grouping selectors can also carry inherit properties have the initial value set to , as for ex- containment relations, as for instance “p” is contained in “p, color ample . Other properties where this behaviour is not span”. These three types of containment relations are rela- border desirable have different initial values set, like the tively straightforward, but they can be combined and form property. more sophisticated containment relations in general, such as “#foo ul.bar li a, #foo ol.bar li a”⊂“#foo a”. Con- 2.4 Media Rules tainment relates sets of specific elements that are associated A media rule starts by @media followed by a condition called or related with selectors. Given two selectors Sb and Sp, media query. This defines a block that is enclosed by curly Sb is contained in Sp iff any element pointed by Sb is also braces, and in which we can add a set of CSS rules that will pointed by Sp. This section treats only proper containment, only apply when the media query is satisfied. The media to clearly separate containment from equivalence. queries define the style sheet target according to expressions concerning devices’ features, such as the color or dimensions. 3.1.1 Refactoring Declaration Blocks As an example, in Listing 1, the text-indent property will Once a containment relation has been identified between two only apply for p elements if the device has a width greater selectors, refactorings will only be possible if they have at or equal than 800 pixels. Such features are key for defining least one property in common (declared under both selec- how web pages will look like on mobile devices. tors). Considering the selectors Sb and Sp, where Sb ⊂ Sp, with their respective sets of property declarations Pb and for the same element, color is set to blue by both selectors, Pp, let us use Pb∧p to denote the set of properties declared so the subset “ul li > a.foo” is not providing any additional under both Sb and Sp, regardless of their values. In the con- style information, so it can be deleted while preserving List- tainment context, refactorings require the existence of a non ing 2’s semantics. As a consequence,the same formatting empty Pb∧p set. If this condition is satisfied, further process- can be achieved with the lighter code shown in Listing 3. ing is needed depending on the specificities of the selectors. This leads to two possible refactoring procedures. Listing 3: Output for Containment Example
1 ul li > a.foo { Procedure 1: Subset S more specific than superset Sp b 2 text-decoration: none; foreach Pi in Pb∧p do 3 font-weight: bold 4 } if Pi has same value under Sb and Sp then 5 delete Pi statement from Sb 6 ul a { end 7 color: blue; end 8 text-decoration: underline ✝9 } ✆ Procedure 1 deletes from the subset Sb the property state- ments that are defined under both rules Pb∧p only if they 3.2 Equivalence Between Selectors share the same value, as the value will already be defined on An equivalence relation between two or more CSS selectors the superset Sp. may also lead to some refactorings. In CSS, this may oc- cur in several situations. First, it is very common to find Procedure 2: Superset Sp more specific than subset Sb more than one rule in the same file with the same selector. Some other times, we find a class selector “.foo” and also its foreach Pi in Pb∧p do delete Pi statement from Sb corresponding attribute selector “[class="foo"]”, or the id end selector variant. Basic settings can be dealt with using some basic string processing. A complete semantic analysis such the one we are using here allow to detect more complex In Procedure 2, all declarations from Pb∧p are deleted from equivalences such as the one that exists between selectors Sb since values from the subset are always overridden by “p:nth-child(odd), p:nth-child(even)” and “p”, as every those defined in the superset Sp. It is clear that in general, paragraph is either odd or even. In general, we define two se- we can only safely delete property declarations from the sub- lectors Si and Sj as being equivalent iff any element pointed set Sb, as Sb is overwhelmed by the superset Sp, but not the by Si is also pointed by Sj and vice versa, no matter what other way around, given the nature of the containment re- are the syntactic forms used in selectors Si and Sj . lation. 3.2.1 Refactoring Declaration Blocks 3.1.2 Example Once an equivalence relation is detected between two se- Consider the CSS code shown in Listing 2. There are two lectors Si and Sj , a deletion of declarations can achieved rules such that there exists a containment relation between provided the existence of a non-empty set Pi∧j . The prop- selectors: “ul li > a.foo” ⊂ “ul a”. Any a element with erties can be deleted in any of the two rules associated with the class attribute set to “foo”, and with a li parent who the two selectors. It is the selector’s specificity that will has a ul ancestor also matches the pattern of an a element determine which statements are redundant. When Si has with a ul ancestor. The subset selector “ul li > a.foo” is higher specificity than Sj , for Pi∧j , the values set under Si more specific than its superset, so under these conditions would then prevail, and since Si ⇔ Sj , values set under Sj Procedure 1 can be safely applied. never apply. This yields refactoring procedure 3:
Listing 2: Input for Containment Example Procedure 3: Si ⇔ Sj with Si more specific than Sj
1 ul li > a.foo { foreach Pk in Pi∧j do 2 color: blue; Delete Pk statement from Sj 3 text-decoration: none; end 4 font-weight: bold 5 } 6 3.2.2 Example 7 ul a { 8 color: blue; Listing 4 illustrates a case of two equivalent selectors. The 9 text-decoration: underline grouped selector in line 7 is composed by three single selec- ✝10 } ✆ tors. Note that the first two “div#nav a”, “div#nav a.bar” are both subsets of the third one “div a”, so any element matched by their two first selectors will also be matched by In this case, color and text-decoration are declared under the third. Therefore, the grouped selector only points to both selectors. When one element is selected by the subset the set of elements matched by its third sub selector (this is (and implicitly by the superset as well), the value for text- equivalent to the selector in line 1). This results in the rela- decoration will be none, as“ul li > a.foo” is more specific. tion “div a” ⇔ “div#nav a, div#nav a.bar, div a”, as in Consequently we cannot delete this declaration. However, fact both selectors point to a a element with a div ancestor. From the CSS semantics point of view, the difference among color of the div elements would be blue. One can reason- the selectors in lines 1 and 7 is that the latter is more specific. ably guess that this was the behaviour that the developer Specificity cannot be determined for grouped selectors, but intended. in this case each single selector that composes the group is more specific than the selector in line 1, so for any element This kind of inconsistencies can be detected too. Given two matched by both“div a”and“div#nav a, div#nav a.bar, media rules, they will either: div a”, the declarations from the grouped selector is chosen first. More details for the precedence rules determination a) Have no relation. For example “(min-color: 4)” and are covered in Section 4.3. “(max-width: 600px)” have no relation whatsoever. b) Have a containment relation, like in the example “tv” ⊂ Listing 4: Input for Equivalence Example “tv and (scan: progressive)” 1 div a { c) Have an equivalence relation, like those introduced by 2 font-size: 14px; patterns such as “a, b and c” ⇔ “(a,b) and (a,c)”, being 3 border: 1px solid; a, b and c in any media query expression. Or we might find 4 background-color: #fff the same media queries under different media rules, that 5 } 6 would indeed be equivalent. 7 div#nav a, div#nav a.bar, div a { 8 font-size: 14px; In order to perform the refactoring procedures proposed in 9 border: 1px dotted Section 3.1 and Section 3.2 on media rules, we have to see ✝10 } ✆ how selectors’ relations change according to their respective media context. Given two selectors Sa and Sb, and their respective media contexts represented by the media queries Under these circumstances Procedure 3 applies with the“div mQa and mQb, Table 1 describes all the possible cases. a” as the less specific selector. Consequently we can remove “font-size: 14px” and “border: 1px solid” as such decla- ⊂ ⊃ rations will always be overridden by the ones stated under mQa mQb mQa mQb “div#nav a, div#nav a.bar, div a”. As a result, they are Sa⊂Sb Sa ⊂ Sb Sa⊂Sb unnecessary as they are always unreachable. The refactored Sa⊃Sb Sa⊃Sb Sa ⊃ Sb code is shown in Listing 5, and obviously preserves the se- ⇔ ⊂ ⊃ mantics from Listing 5. Sa Sb Sa Sb Sa Sb
Table 1: Relations considering selectors’ media queries. Listing 5: Output for Equivalence Example
1 div a { The white cells correspond to cases where the relation among 2 background-color: #fff Sa and Sb does not change if their media contexts are con- 3 } sidered. This would be the case for a selector Sa =“a.foo” 4 mQ 5 div#nav a, div#nav a.bar, div a { under a media rule with the media query a =“screen” 6 font-size: 14px; and Sb =“a” with mQb =“screen, handheld”. Not only 7 border: 1px dotted “a.foo” ⊂ “a”, also “a.foo” only applies to a screen media, ✝8 } ✆ while “a” applies to both a screen and handheld media.
Now let Sa =“div p” with mQa =“all” and Sb =“p” with 3.3 Relations and Media Rules mQb =“tv”. Note that “div p” ⊂ “p”, but “div p” applies The logic operators can now be applied to media queries in all media contexts whereas “p” is only active for tv me- described in Section 2.4 to detect certain inconsistencies. dia types. So whenever we are not under a tv device, “div For example, consider Listing 6. p” might point to elements that “p” would not, and thus it breaks the nature of the containment relation, and prevent- Listing 6: Relations and Media Rules ing our tool from performing the refactorings proposed in Section 3.1, which become no longer safe to achieve. 1 @media (min-width: 1000px) { 2 div { color: red } To conclude, consider again Listing 6. See how we have 3 } two identical selectors Sa, Sb =“div”, in two different me- 4 5 @media (min-width: 800px) { dia contexts, mQa = “(min-width: 1000px)” and mQb = 6 div { color: blue } “(min-widith: 800px)”, being true that mQa ⊂ mQb. Un- ✝7 } ✆ der these circumstances, any device satisfying mQa will also satisfy mQb, but not the other way around. So whenever Sa selects all the div elements, Sb will do too, but not con- Observe that a device that satisfies the first media query will versely. In short, an equivalence relation is turned into con- always satisfy the second one as well. And considering that tainment, as described in the last row of Table 1. media rules do not alter selector’s specificity, in this case “color: red” will never be applied. Note that, if we reverse Once Table 1 is taken into account, the refactoring proce- the order of the media rules, “color: blue” will be active for dures detailed for containment and equivalence between se- devices wider than 800px but smaller than 1000px, so the lectors can be carried out while considering media rules too. 3.4 Deleting Empty Rules rules Ra and Rb with equivalent selectors Sa ⇔ Sb can be The procedures above are meant to delete declarations from merged, we need to guarantee that there is no selector Sc or CSS rules. Applying such procedures might result in an Sd in the style sheet such that: empty rule containing only a selector but with no declara- tions. This rule does selects a set of elements but does not (i) Sc ⊂ Sa with Sc more specific than Sa, and Sc less spe- define any styling for them and does not affect any other cific than Sb. rule application. Consequently, it is safely deleted. (ii) Sd ⊃ Sa with Sd more specific than Sa, and Sd less specific than Sb. 3.5 Merging Rules with Equivalent Selectors Given two equivalent selectors Sa and Sb, a refactoring pro- Note that as Sa ⇔ Sb, the relation Sc ⊂ Sa already implies cedure that can reduce the style sheet’s size consists in merg- that Sc ⊂ Sb, and the same applies to Sd. More generally, ing their respective rules Ra and Rb. By merging Ra and Rb a pair of rules with equivalent selectors Sa ⇔ Sb might be we mean the following: as Sa and Sb affect the exact same merged if all the selectors that hold a containment relation- set of elements, we group the declarations of both rules. Let ship with them, are either more specific than both Sa and Sa be shorter than Sb, then we would keep Sa (the shortest), Sb, or are less specific than both Sa and Sb. Observe that in and move all the declarations from Rb to Ra. If any declara- Listing 7, the subset “div div[id="nav"]” is more specific tion concerns the same property, and has different values set than “div[id="nav"]” but less specific than “div#nav”, and under Ra and Rb, we would keep the declaration set under that is why the rules cannot be merged. the most specific of the two selectors, however Section 3.2 already takes care of this. Nevertheless, if a rule Rx with a selector Sx fulfilling the con- ditions of (i) or (ii) was found, the rules Ra and Rb might To exemplify the procedure, let’s consider Listing 7. We still be merged only if the declarations we move among Ra have two equivalent selectors“div#nav”⇔“div[id="nav"]”, and Rb do not concern any of the properties declared un- so let’s keep the rule with shortest one “div#nav”, and move der Rx. Given the rules stated in Listing 7, there exists a the declarations“margin: 5px”and“text-align: left”from problem in moving “padding: 0px” and “text-indent: 2px” “div[id="nav"]”to“div#nav”. Instead of using two rules from the rule with the selector “div#nav” to the one with with 2 declarations each, after this refactoring we would use “div[id="nav"]”. Then we can delete the resulting empty one rule with 4 declarations. rule “div#nav { }”. In realistic style sheets, a much larger set of rules need to be considered in order to determine if Listing 7: Merging Rules with equivalent selectors this refactoring is valid or not. For our example, Listing 7, after merging “div#nav” and “div[id="nav"] with the right 1 div#nav { procedure, the smaller style sheet preserving the semantics 2 padding: 0px; is represented in Listing 8. 3 text-indent: 2px 4 } 5 Listing 8: After Merging Rules the right way 6 div[id="nav"] { 7 margin: 5px; 1 div[id="nav"] { 8 text-align: left 2 margin: 5px; 9 } 3 text-align: left; 10 4 padding: 0px; 11 div div[id="nav"] { 5 text-indent: 2px 12 margin: 10px 6 } ✝13 } ✆ 7 8 div div[id="nav"] { 9 margin: 10px However, we cannot perform this refactoring as it does not ✝10 } ✆ always preserve the style sheet’s semantics. The reason is because selectors confer its specificity to the declarations that they encapsulate. For example, in Listing 7, when we move “margin: 5px” from “div[id="nav"]”to“div#nav”, 4. IMPLEMENTATION TECHNIQUES if some element is pointed by “div div[id="nav"]”, the declaration “margin: 10px” will always be inactive as “div 4.1 Modeling & Analysis of Single Selectors div[id="nav"]” ⊂ “div#nav”, and “div#nav” will confer its To detect relations between selectors, we build on and ex- higher specificity to its declaration “margin: 5px”, and so tend earlier works on the logical modelling of selectors de- it would override “margin: 10px”. Note that if we do not scribed in [7]. We first translate selectors in a logic: each refactor Listing 7, “margin: 5px” has the specificity from its selector Si is associated with a logical formula F(Si) as de- selector “div[id="nav"]”, which is lower than the one from scribed in [7], and then we use the logical satisfiability solver “div div[id="nav"]”. Consequently, for the set of elements described in [8] to check for the existence of relations be- affected by “div div[id="nav"]”, margin will be 10px. tween logical formulas. For instance, the validity of a con- tainment relation Si ⊆ Sj is checked by testing for the un- satisfiability of the negation of the logical implication F(Si) Applicability of the Procedure. In order to perform this =⇒ F(Sj ). Concretely, our prototype implementation issues refactoring without affecting the style sheet’s semantics, we external calls to the implementation of the logical solver of have to define its applicability. To determine when a pair of [8] for this purpose. We review below the main extensions to the simple transla- media rule, it applies to the style sheet’s default media type, tion of selectors introduced in [7] as well as the developments which depends on the HTML specification. Nevertheless, that we introduced in our prototype implementation. when a CSS file is called under the link element, its media attribute can be stated with a media query as a value. If so, 4.2 Grouped Selectors this media query will define the file’s default media type. A grouped selector is a list of n > 1 single selectors, sepa- rated by a comma character. The translation of a grouped 4.5 Traversal of Selectors N N selector Sg intro tree logic requires the translation of each Given certain style sheet with rules, there will be se- one of the n single selectors. The comma character plays the lectors Si where i = 1, 2,...,N. To detect all the possible role of a logical “or” between the different single selectors relations between selectors, each Si has to be tested for logi- that compose the group, so the logical disjunction operator cal inclusion against the remaining N−1 selectors. This adds | will be used to connect the single selectors’ translations, up to a total of N × (N − 1) tests, which for relatively large capturing this way the semantics of the grouped selector. style sheets (with more than 1000 rules) results in millions Given a grouped selector Sg, composed by n single selectors of tests. Since logical tests are the heaviest computation sg,i, we have: of our tool, several mechanisms can be used to avoid such explosion: F(Sg)= F(sg,1) | F(sg,2) | ... | F(sg,n) 1. If two selectors point to elements with different names, 4.3 Specificity and Grouped Selectors they will always represent disjoint sets Our tool considers static CSS files, so it operates on the 2. If a selector S1 refers to one or more attributes that S2 author style sheets (described in Section 2.2). In this context does not, S1 will never contain S2 the specificity determines which selector applies when more 3. If two selectors’ translation into tree logic result in the than one point to the same element, and in the case of a same string, the selectors are equivalent collision between selectors’ specificities (several do have the 4. Given a pair of selectors such that S1 ⇔ S2, and a third same one), the one that appears the latest syntactically in selector S3, if (a) S3 ⊂ S1, (b) S3 ⊃ S1 or (c) S3 ⇔ S1, the file is selected. then (a) S3 ⊂ S2, (b) S3 ⊃ S2 or (c) S3 ⇔ S2 due to the transitivity of equivalence and containment binary relations For a pair of single selectors, we calculate their specificity vectors, and compare their components. However, specificity cannot be determined for grouped selectors. Instead, for a 5. EXPERIMENTAL RESULTS pair composed by single selector Ss and a grouped one Sg, We now report on the experimental evaluation of our refac- we check that Ss is either more specific or less specific than toring methods with real-world style sheets used in some of all the single selectors sg,i that compose the group Sg, and the most popular web sites. if so, Ss is considered more specific or less specific than Sg accordingly. Otherwise no refactoring will be possible. In 5.1 Analysis of Single CSS Files the same way, if we have a pair of grouped selectors Sg and We have extracted the largest CSS file used in 20 differ- Sh, the same procedure is applied, but considering each sg,i ent websites corresponding to various web applications types against each sh,j , and assuring that one is either always more and having different complexity levels. They are presented specific or less specific than the other. in Table 2. For the sake of brevity, an identifier (integer) is used to identify each of them. The number of CSS rules is Nevertheless, when comparing specificities, not all the pairs shown in this table. This number gives a clear idea of the sg,i : sh,j are relevant to the global relation between Sg style sheet’s size and constitutes a relevant metric for the and Sh. When sg,i and sh,j represent disjoint sets (sg,i ∧ techniques described in this paper. The file sizes range from sh,j = ∅), there is no tree structure on which an element 10 to 320 Kilobytes. is pointed by both sg,i and sh,j , so figuring out which one # CSS # CSS is more specific is not relevant. This means that we should ID Web ID Web Rules Rules only check that for all the pairs that are not disjoint (sg,i ∧ ∅ 1 ACM Digital Lib. 102 11 Iberia 729 sh,j 6= ) sg,i is always either more specific or less specific 2 Apple 784 12 Il Sole 24 Ore 833 than sh,j to conclude that Sg is respectively more specific 3 Cambridge Univ. 845 13 Lamborghini 1472 4CNN 2738 14 Microsoft 702 or less specific than Sh. For example, for “span.foo” ⊂ 5 Coursera 3690 15Opera 708 “span, p#bar” the fact that “span.foo” is less specific than 6 Ebay 1573 16 PayPal 1089 “p#bar” is irrelevant, as there is no element that can be 7 Facebook 2757 17 Salesforce 1158 8 Firenze Turismo 172 18 Shell 1111 simultaneously matched by both selectors. Consequently, 3 9 Foundation 800 19 WWW15 537 our tool will consider that “span.foo” is more specific than 4 10 Google Sites 1676 20 YouTube 1841 “span, p#bar” as “span.foo” is more specific than “span” ∅ and “span.foo” ∧ “p#bar”= . Table 2: Dataset for the experiments 4.4 Selectors and Media Rules In the remaining part of this Section, whenever global av- erages of percentages are calculated, we take the total dele- In our analysis, every selector will have a set of associated tions in all files and compare it to the total files’ size. Our media types. For the selectors stated under a media rule, the set of associated media types is defined by the rule’s media 3ZURB Foundation framework’s default template query. On the other hand, when a selector is not part of a 4Google Sites’ default template tnilyfo n aet h te ntedtst For dataset. the in other sub- the vary procedure to each case of one effect drawn the from be that can stantially is that 4 of conclusion Figure part explained interesting from An fact as Rules in 3.3. procedures, Media Section are equivalence the in they and that but containment out analysis, the this point (in in to reduction considered important size are % is in 8.62 It explained an as by rules bytes). contributes Merging only that reduction. 3.5 rules size Section the the of deleting a % seem, re- for 32.23 might size it accounts as equivalence the naive became of the As % whereas %. 26.54 32.61 The bytes, a respectively. in 3.2 to duction and contributes 3.1 selec- test Sections between containment in equivalence explained or as either containment tors, will by declarations in- deleted preceded refactoring The be each 3.1. of Section contribution in troduced the illustrates a 2. 4 Figure leaving in Figure shown and reduction refactor- size These rules the empty. to the rules leading sheet’s those of style are been ing total have % the declarations of 13.70 % the declarations). 4.17 a of no modifying % (with rules 7.63 deleted, analysis a and average, after rules, per- On empty modified the shows became declarations, 3 that Figure deleted entries, of dataset the centage of one % each 1.41 For to up and % %. 1.55 8 by size to the up respectively. reduce YouTube, % only and can 4 Facebook dataset, tool between from the the extracted size in CSS and the items the reduce % the for Finally, safely 9.7 of or can majority by Apple, the tool size For form our the %. reduces sheet 12.58 tool style to CSS up our the 5 which find of on group we bytesCoursera, a which sheet’s is style among There a of files, semantics. in % is CSS 17.83 reduction tool preserving the Our to while size up sheets. file deleting style of of the capable among 2. percentages dramatically Figure vary the in bytes shown that is the observe all 3 We applying Section by from achieved techniques reduction refactoring size the file, each For supports. prototype our that sheet style olpooyede o e upr l S3selectors CSS3 determined all are support percentages yet not the does prototype tool hw nTbe2(yNvme 2014) November (by 2 Table in shown 5 10 15 20 h olspot 78 fteslcosi h dataset the in selectors the of % 67.83 supports tool The 0 5 iue2 fdltdbtsfrec aastentry set data each for bytes deleted of % 2: Figure
1 11.69 empty 2 11.24 3 8.37
spooe nScin34 otiue oa to contributes 3.4, Section in proposed as , 4 10.63 5 9.7 6 4.32 7 1.55 8 7.32 9 4.34 10 17.83
relative 11 5.27 12 3.93 13 12.58 fDltdBytes Deleted of % 14 4.17 otepr fthe of part the to 15 4.74 Mean=7.60% 16 5.68 17 5.36 18 6.43 19 4.51 safely 5 20 so , 1.41 TLdcmnsa hw nFgr .I osssi ex- the in and consists declaration, It type 5. from document Figure extracted the in is shown ploring analysis as the documents for HTML needed information The files different from element. rules same several the when defines target apply 2.2 will Section case, rule in the this described which achieve mechanism In can cascade files. specific CSS tool group- CSS the the several our some across involved, of procedures simply HTML Regardless refactoring or the of page, libraries. application instances resembles same the which the of sections ings of corre- distinct might parts of file styling different Each the to to presentation. spond files graphical CSS their several Files use define Multiple frequently with applications Sheets web Style Modern here. 5.2 propose we relevance one the the increases like this tools that automated believe of unmastered illustrates We generally This developers. remain other). mechanisms by the CSS that to in fact practice site the common one that no from developers is them there the designing that procedures. on devel- shows other (this solely common the them share depend builds for oth- really but true some not patterns is in do same opment whereas The sheets deletions, style %. total Real-world 5 the only of it % accounts ers 88 procedure to containment up the for files some in example, entry deleted total dataset the each to for contribution bytes procedure’s Each 4: Figure et htaeudrthe under are that ments ei yetkstedfutvlea ecie ntespec- the in described as value default ification: the takes type media etwt h attribute the with ment epnst ei ur etn h tl he’ media sheet’s style the setting the query If media type. a to responds dia h e ie fordtstwoemi TLpg has page HTML main whose dataset our retained of have we sites files, web different the with sheets style analyze To the extract to need we why is specification. This [21]. 1 XHTML the by referenced file CSS % of the total deleted bytes 100 20 40 60 80 0 trbt sst eetatisvle uhavlecor- value a Such value. its extract we set, is attribute eee elrtos(Equivalence) Declarations Deleted (Containment) Declarations Deleted 1 all 2 media 3 nHM5[]or [3] HTML5 in 4
trbt sntst hntesyesheet’s style the then set, not is attribute 5 6 7 rel="stylesheet"
head 8 href 9 screen lmn.Freach For element. 10
trbt,adi the if and attribute, 11 12
nHM 1]and [10] 4 HTML in 13
Merging Empty Deleting 14 ertiv the retrieve we , 15 16 !DOCTYPE link
link 17 18 19 me- ele- ele- 20 , ina h iesdfut(itdi al ) n 2 include (2) under and elements 3), same Table the in least (listed default at site’s the as tion oeta n S l eeecdin referenced file CSS one than more files. CSS multiple analyze to needed Information 5: Figure etde o le h rsnaino n TLinstance, HTML any as of long presentation experi- as the second alter this not in does performs ment tool our it. that over refactoring refactoring The our ef- apply will then browser emulate we the to and that 5 use, sheet fectively Figure style in compounded shown global use the as we in- experiment, extracted without second information and the files the isolation For in CSS first them. used item’s The between were the teraction they 3. of Table if all in as analyzing separately, listed our ex- in items of two consists the results perform experiment of the we each affect section, for might this periments this in some how from in procedures, see stated declarations refactoring To declarations that by files. is overridden other be subtleties might CSS file many one the of One of number infor- total extra the the and as well analysis as this rules. 3, for Table extracted in mation shown is dataset new 6 8SelHM56 4 3 2 HTML5 HTML5 6 HTML5 HTML5 1 XHTML YouTube 20 Shell 18 PayPal 16 Opera 15 Iberia 11 10 ID oesyeset had sheets style Some aeokHM55 HTML5 Facebook 7 % 10 15 20 25 0 5 Web ogeSites Google ✝