UBC Theses and Dissertations

UBC Theses Logo

UBC Theses and Dissertations

Code smells in cascading style sheets : an empirical study and a predictive model Gharachorlu, Golnaz 2014

Your browser doesn't seem to have a PDF viewer, please download the PDF to view this item.

Item Metadata

Download

Media
24-ubc_2015_february_gharachorlu_golnaz.pdf [ 1.34MB ]
Metadata
JSON: 24-1.0167067.json
JSON-LD: 24-1.0167067-ld.json
RDF/XML (Pretty): 24-1.0167067-rdf.xml
RDF/JSON: 24-1.0167067-rdf.json
Turtle: 24-1.0167067-turtle.txt
N-Triples: 24-1.0167067-rdf-ntriples.txt
Original Record: 24-1.0167067-source.json
Full Text
24-1.0167067-fulltext.txt
Citation
24-1.0167067.ris

Full Text

Code Smells in Cascading StyleSheets: An Empirical Study and aPredictive ModelbyGolnaz GharachorluB.Sc., The University of Tehran, 2008A THESIS SUBMITTED IN PARTIAL FULFILLMENT OFTHE REQUIREMENTS FOR THE DEGREE OFMASTER OF APPLIED SCIENCEinThe Faculty of Graduate and Postdoctoral Studies(Electrical and Computer Engineering)THE UNIVERSITY OF BRITISH COLUMBIA(Vancouver)December 2014c© Golnaz Gharachorlu 2014AbstractCascading Style Sheets (CSS) is widely used in today’s web applications toseparate presentation semantics from HTML content. Despite the simplesyntax of CSS, the language has some characteristics, such as inheritance,cascading and specificity, which make authoring and maintaining CSS achallenging task. In this thesis, we describe a set of 26 CSS smells and errors,collected from various development resources and propose an automatedtechnique to detect them. Additionally, we conduct a large empirical studyon 500 websites, 5060 CSS files in total which consist of more than 10 millionlines of CSS code, to investigate which smells and errors are more prevalentand to what extent they occur in CSS code of today’s web applications.Finally, we propose a model based on the findings of our empirical studythat is capable of predicting the total number of CSS code smells in any givenwebsite which can be used by developers as a CSS code quality guidance. Astudy of unused CSS code on 187 websites and its results are also describedin this thesis.iiPrefaceThis thesis presents a large empirical study of code smells in CascadingStyle Sheets (CSS) conducted by the author under the supervision of Dr.Ali Mesbah. I was responsible for designing the smell detection algorithms,implementation and evaluation of the tool CSSNose that is an extendedversion of an open source tool called Cilla [1], collecting data, analyzingresults and proposing the predictive model.The results of this work is under review as a submission to a softwareengineering journal.iiiTable of ContentsAbstract . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iiiTable of Contents . . . . . . . . . . . . . . . . . . . . . . . . . . . . ivList of Tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . viiList of Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ixAcknowledgements . . . . . . . . . . . . . . . . . . . . . . . . . . . xiDedication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Background: the CSS Language . . . . . . . . . . . . . . . . 32.1 CSS Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32.2 Inheritance and Cascading Order . . . . . . . . . . . . . . . 53 Proposed CSS Smells . . . . . . . . . . . . . . . . . . . . . . . 73.1 Smells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.1.1 Non-External Rules . . . . . . . . . . . . . . . . . . . 83.1.2 Too Long Rules . . . . . . . . . . . . . . . . . . . . . 93.1.3 Too Much Cascading . . . . . . . . . . . . . . . . . . 93.1.4 High Specificity Values . . . . . . . . . . . . . . . . . 93.1.5 Selectors with Erroneous Adjoining Patterns . . . . . 103.1.6 Too General Selectors . . . . . . . . . . . . . . . . . . 103.1.7 Properties with Hard-Coded Values . . . . . . . . . . 113.1.8 Undoing Styles . . . . . . . . . . . . . . . . . . . . . . 123.2 Smell Thresholds . . . . . . . . . . . . . . . . . . . . . . . . . 123.3 Smell Detection . . . . . . . . . . . . . . . . . . . . . . . . . 153.4 Evaluation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15ivTable of Contents4 Empirical Study . . . . . . . . . . . . . . . . . . . . . . . . . . . 184.1 Included CSS Smells . . . . . . . . . . . . . . . . . . . . . . . 184.2 Smell Detection Framework . . . . . . . . . . . . . . . . . . . 204.3 Experimental Objects . . . . . . . . . . . . . . . . . . . . . . 204.4 Setup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214.5 Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224.5.1 Pervasiveness (RQ1) . . . . . . . . . . . . . . . . . . . 224.5.2 Extent (RQ2) . . . . . . . . . . . . . . . . . . . . . . 224.5.3 Correlations (RQ3) . . . . . . . . . . . . . . . . . . . 274.6 Unused Code Analysis . . . . . . . . . . . . . . . . . . . . . . 304.6.1 Unused Code Pervasiveness . . . . . . . . . . . . . . . 314.6.2 Unused Code Extent . . . . . . . . . . . . . . . . . . 324.6.3 Unused Code Correlations . . . . . . . . . . . . . . . 335 Smell Predictive Model . . . . . . . . . . . . . . . . . . . . . . 355.1 Predictive Model Inference . . . . . . . . . . . . . . . . . . . 355.2 Model Evaluation . . . . . . . . . . . . . . . . . . . . . . . . 376 Discussion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416.1 Implications . . . . . . . . . . . . . . . . . . . . . . . . . . . 416.2 Code Smells . . . . . . . . . . . . . . . . . . . . . . . . . . . 426.3 Our Predictive Model . . . . . . . . . . . . . . . . . . . . . . 436.4 Threats to Validity . . . . . . . . . . . . . . . . . . . . . . . 447 Related Work . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457.1 Code Smells . . . . . . . . . . . . . . . . . . . . . . . . . . . 457.2 Smells in CSS Code . . . . . . . . . . . . . . . . . . . . . . . 457.3 Predictive Models . . . . . . . . . . . . . . . . . . . . . . . . 468 Conclusions and Future Work . . . . . . . . . . . . . . . . . . 47Bibliography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49AppendicesA CSS Code Smells Detected by CSS Lint and W3C CSS Val-idator Included in Our Empirical Study . . . . . . . . . . . 54A.1 Smells Reported by CSS Lint . . . . . . . . . . . . . . . . . . 54A.1.1 Empty Catch Rules . . . . . . . . . . . . . . . . . . . 54A.1.2 !important . . . . . . . . . . . . . . . . . . . . . . . . 54vTable of ContentsA.1.3 @import . . . . . . . . . . . . . . . . . . . . . . . . . 55A.1.4 IDs in Selectors . . . . . . . . . . . . . . . . . . . . . 55A.1.5 Unqualified Attribute Selectors . . . . . . . . . . . . . 55A.1.6 Qualified Headings . . . . . . . . . . . . . . . . . . . 56A.1.7 Already Defined Headings . . . . . . . . . . . . . . . 57A.1.8 Units for Zero Values . . . . . . . . . . . . . . . . . . 57A.1.9 Box Model Size . . . . . . . . . . . . . . . . . . . . . 57A.1.10 Not Using Shorthand Properties . . . . . . . . . . . . 58A.1.11 Duplicate Properties . . . . . . . . . . . . . . . . . . 58A.1.12 Unknown Properties . . . . . . . . . . . . . . . . . . . 59A.1.13 Negative text-indent . . . . . . . . . . . . . . . . . . . 59A.1.14 Underscore Hack . . . . . . . . . . . . . . . . . . . . . 61A.1.15 Too Many Web Fonts . . . . . . . . . . . . . . . . . . 61A.1.16 Too Many font-size . . . . . . . . . . . . . . . . . . . 61A.2 Smells Reported by W3C CSS Validator . . . . . . . . . . . 61A.2.1 Parse Error . . . . . . . . . . . . . . . . . . . . . . . . 62A.2.2 Value Error . . . . . . . . . . . . . . . . . . . . . . . 62B Diagrams for Distribution of Smell Instances of DifferentTypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63C List of 500 Websites in Our Empirical Study . . . . . . . . 67C.1 Alexa’s 350 Top Websites . . . . . . . . . . . . . . . . . . . . 67C.2 150 Websites Collected Randomly . . . . . . . . . . . . . . . 76D List of 187 Websites in Unused Code Study . . . . . . . . . 80viList of Tables3.1 Our proposed list of smells, detected by CSSNose and in-cluded in our empirical study. . . . . . . . . . . . . . . . . . . 83.2 Descriptive statistics on the number of CSS selector units andproperties, for 20 websites. . . . . . . . . . . . . . . . . . . . . 143.3 Precision Rate (%): NA means the website does not have thattype of smell . . . . . . . . . . . . . . . . . . . . . . . . . . . 174.1 List of smells and errors detected by CSS Lint and W3CCSS Validator included in our empirical study . . . . . . . 194.2 Descriptive characteristics of the 500 experimental objects . . 214.3 Descriptive statistics of the total number of code smell type-s/instances (500 websites) . . . . . . . . . . . . . . . . . . . . 224.4 Pervasiveness of the 26 types of CSS smells in 500 websites . 234.5 Descriptive statistics of detected code smells (500 websites) . 264.6 Descriptive statistics of universality, average scope and ab-stractness factor (500 websites) . . . . . . . . . . . . . . . . . 284.7 Spearman correlation coefficients (corr) with p-values betweenCSS code smell instances/types and CSS code metrics . . . . 284.8 Descriptive characteristics of the 187 experimental objects(Unused Code Study) . . . . . . . . . . . . . . . . . . . . . . 324.9 Descriptive statistics of unused CSS code in our 187 experi-mental objects (Total Number) . . . . . . . . . . . . . . . . . 324.10 Descriptive statistics of unused CSS code in our 187 experi-mental objects (Percentage) . . . . . . . . . . . . . . . . . . . 324.11 The size reduced in terms of bytes after applying the removalof unused code (187 websites) . . . . . . . . . . . . . . . . . . 334.12 Spearman correlation coefficients (corr) with p-values betweenunused CSS selectors/properties and CSS code metrics . . . 34viiList of Tables5.1 Prediction errors and their values for our model: yˆi, yi and nare predicted values, actual values and the number of predic-tions, respectively. y¯, ymax and ymin are the mean, maximumand minimum of the actual values. . . . . . . . . . . . . . . . 40viiiList of Figures2.1 CSS Rule Grammar . . . . . . . . . . . . . . . . . . . . . . . 32.2 Three CSS rules with different selector types selecting thesame DOM element . . . . . . . . . . . . . . . . . . . . . . . 42.3 Selector Units . . . . . . . . . . . . . . . . . . . . . . . . . . . 53.1 Selector with Too Much Cascading . . . . . . . . . . . . . . . 93.2 Selectors with High Specificity Values . . . . . . . . . . . . . 103.3 Erroneous Adjoining Selectors . . . . . . . . . . . . . . . . . . 113.4 Too General Selector . . . . . . . . . . . . . . . . . . . . . . . 113.5 Incorrect menu styling as a result of hard-coded CSS properties. 123.6 Hard-coded values for the Menu shown in Figure 3.5 . . . . . 133.7 Undoing Style CSS Code . . . . . . . . . . . . . . . . . . . . . 134.1 Overview of our overall smell detection framework . . . . . . 214.2 Numerical proportion of the detected smell types . . . . . . . 244.3 Distribution of the total number of smell instances of CSSsmell types with the largest instance proportions among alldetected smells. . . . . . . . . . . . . . . . . . . . . . . . . . . 254.4 Scatter plots of total number of CSS smell instances versusCSS metrics. corr represents the Spearman correlation coef-ficient and p is the p-value. . . . . . . . . . . . . . . . . . . . 294.5 External CSS File (example.css) . . . . . . . . . . . . . . . . 304.6 DOM affected by CSS code in Figure 4.5 . . . . . . . . . . . . 314.7 Distribution of CSS Unused Code . . . . . . . . . . . . . . . . 335.1 Actual versus predicated values . . . . . . . . . . . . . . . . . 385.2 Diagrams of residuals . . . . . . . . . . . . . . . . . . . . . . 396.1 Poor CSS patterns in a real world CSS file . . . . . . . . . . . 426.2 Equivalent properties intentionally added for browser com-patibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43ixList of FiguresA.1 Using @import and its refactoring . . . . . . . . . . . . . . . 55A.2 Unqualified Attribute Selectors . . . . . . . . . . . . . . . . . 56A.3 Qualified Heading . . . . . . . . . . . . . . . . . . . . . . . . . 56A.4 Box model size and its refactoring . . . . . . . . . . . . . . . 57A.5 Not using shorthand properties and its refactoring . . . . . . 58A.6 Duplicate Properties . . . . . . . . . . . . . . . . . . . . . . . 59A.7 Correct CSS: Not considered as duplicate . . . . . . . . . . . 59A.8 Using Negative text-indent . . . . . . . . . . . . . . . . . . . 60A.9 Correct CSS: Not using negative text-indent . . . . . . . . . . 60A.10 Correct CSS: Defining classes for different font-size values . 62B.1 Distribution of the total number of box model size, alreadydefined headings and qualified headings smell instances in our500 experimental objects . . . . . . . . . . . . . . . . . . . . . 63B.2 Distribution of the total number of duplicate properties, toogeneral selectors and negative text-indent smell instances inour 500 experimental objects . . . . . . . . . . . . . . . . . . 64B.3 Distribution of the total number of @import, too many font-size, lack of shorthand properties and unknown propertiessmell instances in our 500 experimental objects . . . . . . . . 64B.4 Distribution of the total number of !important, too long rules,parse error, too much cascading and units for zero values smellinstances in our 500 experimental objects . . . . . . . . . . . 65B.5 Distribution of the total number of erroneous adjoining pat-terns and high specificity values smell instances in our 500experimental objects . . . . . . . . . . . . . . . . . . . . . . . 65B.6 Distribution of the total number of too many web fonts smellinstances in our 500 experimental objects . . . . . . . . . . . 66xAcknowledgementsI would like to thank Dr. Ali Mesbah for giving me the opportunity to bea member of SALT lab. I appreciate his wise supervision, broad knowledgeand careful guidance during my research work.I would like to acknowledge Dr. Karthik Pattabiraman and Dr. Kon-stantin Beznosov for the generosity with their time and kindly agreeing tobe on my defence committee.A special thank you to all my friends for being supportive during thetime I have been away from my family.Last but not least, I would like to thank my parents for their dedicationand support during all years of my life and education. With no doubt, itwas not possible for me to achieve any of my goals without their generosityand kindness.xiDedicationTo my parentsxiiChapter 1IntroductionCascading Style Sheets (CSS)1 is a language for describing presentationsemantics in web applications. Along with HTML and JavaScript, CSS iswidely used by developers to achieve separation of concerns between stylingand structural code. According to recent surveys [2], more than 90% oftoday’s websites use CSS. Despite its wide-spread adoption, CSS has notreceived much attention from the research community.Every cascading style sheet contains a sequence of independent rules.Each rule defines a set of styling properties, which gives CSS a relativelysimple syntax. Behind this apparent syntactical simplicity, the CSS lan-guage features intricate characteristics, such as inheritance, cascading, andspecificity, which make authoring and maintaining CSS code a cumbersomeand time consuming task for developers [1, 3–5].As a result, it is common for CSS code to contain smells. Code smells areinappropriate patterns of the code that reflect weaknesses in the design andmay cause issues in program comprehension and maintenance in the longterm. In a recent study, Mesbah and Mirshokraie [1] conducted an analy-sis of unused CSS code and found that on average 60% of CSS selectors isunmatched or ineffective in deployed web applications. More recently, Maz-inanian et al. [6] studied duplicated code in CSS and found that the extentof duplication in CSS code ranges between 40–90% for the vast majority ofthe examined CSS files. These studies, however, consider only two types ofsmells in CSS, i.e., unused and duplicated code.Our work in this thesis is motivated by the fact that there is currentlya lack of a comprehensive empirical study to examine the prevalence andextent of different types of CSS code smells in today’s web applications. Tothe best of our knowledge, this thesis presents the first large-scale empiricalstudy to characterize CSS code smells in web applications.In this work, we first propose a set of eight new code smells, which arenot detected by current CSS analysis tools such as CSS Lint2 or W3C CSS1http://www.w3.org/Style/CSS/2 http://csslint.net/1Chapter 1. IntroductionValidator.3 We implement a CSS smell detector, called CSSNose, whichdetects the proposed CSS smells.We conduct a large empirical study to examine the prevalence and extentof CSS code issues in today’s websites. We investigate correlations betweenCSS code characteristics and the number of CSS smell types and instances.Our study is conducted on 500 websites consisting of 5,060 CSS files and10 million lines of CSS code. The analysis includes 26 CSS smell types intotal, i.e., eight proposed smells detected by CSSNose, 16 existing types ofCSS smells detected by CSS Lint, and two validation errors detected byW3C CSS Validator. In addition, we analyze the extent of the unusedCSS code in 187 of these 500 websites.Our results indicate that among the detected code smells, CSS propertieswith hard-coded values and undoing style code are the most prevalent codesmells occurring in 96% of the 500 websites studied, followed by too longrules and using IDs in CSS selectors included in CSS code of 94% and 90% ofthe websites, respectively. In terms of extent, on average 36% of propertiesare hard-coded, 12% of properties apply undoing style, 22% of CSS selectorsuse IDs, and 12% of rules are too long.In addition, using the data obtained from our empirical study, we proposea predictive model, capable of predicting the CSS code quality of a givenwebsite. Our predictive model shows a high level of accuracy by exhibitingnormalized prediction errors as well as residual medians close to zero.The rest of this thesis is organized as follows. The next chapter describesthe CSS language by giving an overview of the main features. We discussour proposed set of CSS code smells, our detection criteria and mechanism,implementation of our tool and its evaluation in chapter 3. In chapter 4we present the design of our empirical study followed by the results of thestudy. Furthermore, an analysis of CSS unused code is included in thischapter. Our CSS predictive model is proposed and evaluated in chapter 5.The thesis closes with discussions, related work and conclusions.3 http://jigsaw.w3.org/css-validator/2Chapter 2Background: the CSSLanguageIn this chapter, we describe the main features of the CSS language that areneeded to understand the rest of the thesis.2.1 CSS RulesCSS is a language for prescribing the presentation semantics of HTML el-ements. Cascading style sheets are written as a set of rules. Figure 2.1depicts the grammar of CSS rules. Each rule is composed of a selector partselector,{ declaration ; }Figure 2.1: CSS Rule Grammarand a declaration part surrounded by curly braces. The selector part selectsone or more Document Object Model (DOM) elements from the webpage.The declaration part contains one or more declarations, separated by semi-colons. Each declaration includes a styling property name and its value, tobe applied to the DOM elements selected by the selector part.CSS Selectors. A CSS selector can select one or more DOM elements fromthe webpage. There are three main mechanisms to select DOM elements bythe selector type:• Element Selectors select DOM elements based on their elementtypes (e.g., P, DIV, A, SPAN);• ID Selectors are defined using ‘#’ as the prefix followed by an IDname and select DOM elements based on the value of their ID at-tributes;32.1. CSS Rules• Class Selectors are specified by the prefix ‘.’ followed by the classname and select DOM elements which have a class attribute matchingthe class name of the selector.In Figure 2.2, three CSS rules are defined based on these mechanisms.The rules have different selector types but they all select the same DOMelement, i.e, p, to change its colour.CSS code DOMp { /* e l e m e n t s e l e c t o r */color : b lue ;}#ex22 { /* ID s e l e c t o r */color : b lue ;}. example { /* c l a s s s e l e c t o r */color : b lue ;}<p id=" e x 2 2 " c l a s s=" e x a m p l e "> content </p>Figure 2.2: Three CSS rules with different selector types selecting the sameDOM elementThe selector part of the rule can either consist of a simple selector of anyof the above three types or a complex selector that combines a number ofsimple selectors.Combinators. There are four types of combinators for constructing com-plex selectors. Assuming that ss1 and ss2 are two simple selectors, we cancombine them to create a complex selector as follows:• Descendant Combinator (ss1 ss2) selects all elements selected byss2 that are descendants of elements selected by ss1;• Child Combinator (ss1 > ss2) selects all elements selected by ss2that are direct children of elements selected by ss1;• General Sibling Combinator (ss1 ∼ ss2) selects all elements se-lected by ss2 that have an element selected by ss1 as a sibling;• Adjacent Sibling Combinator (ss1 + ss2) selects all elements se-lected by ss2 that have an element selected by ss1 as a direct sibling;Selector Unit. In the rest of this work, we refer to each simple selectorused in a complex selector as a selector unit. By this definition, we havethree types of selector units, namely, ID unit, class unit, and element unit.Figure 2.3 depicts an example of a complex selector composed of one ID42.2. Inheritance and Cascading Order(#news), two class (.headlines and .first), and four element selector units(ul, li, span, and a). This complex selector selects all a elements that fallunder span elements, that fall under li elements with class "first", underul, under elements with class "headlines", under elements with ID "news".1 #news .headlines ul li.first span a {2 margin: 10%;3 color: red;4 }Figure 2.3: Selector UnitsSelectors can also be defined as pseudo classes and pseudo elements.Pseudo classes define styling for a special state of an element. For example,a:visited selects only the links visited by the user and not all the links.Pseudo elements limit the scope of applying style declarations to specificparts of an element. For example, p::first-letter formats only the firstletter of the text in p elements.Different selector parts with the same declaration can be grouped to-gether to avoid code duplication in CSS. In grouping, selector parts areseparated by commas.2.2 Inheritance and Cascading OrderThe concept of inheritance in CSS is based on the fact that child DOMelements inherit styling properties from their parents automatically.If multiple rules select the same set of DOM elements, then they competefor applying their styling properties to the selected elements. In this case,the cascading order decides which rules are applied ultimately based on therules’ location and specificity.Location. CSS code can be defined in different positions in a web applica-tion:• Inline CSS Code: It is defined for specific HTML elements using thestyle attribute;• Internal or Embedded CSS Code: This type of CSS is located insidea <style> element, added to the HTML document’s header;52.2. Inheritance and Cascading Order• External File: In this case, CSS code is authored in external stylesheets which are separate files usually with .css extension and are ref-erenced within the HTML document;For competing rules, the further a rule is from a selected element, theless priority it receives to be applied to that element.Specificity. The specificity value (SV ) of a selector S is a four-digit num-ber, computed as follows:SV (S) = concatenate(a, b, c, d) (2.1)where:• a={1 If CSS is inline0 Otherwise• b is total number of ID units in the selector• c is total number of class units in the selector• d is total number of element units in the selectorIf two or more selectors target the same DOM element to apply theirproperty values, the selector with the larger specificity value receives a higherpriority. In case of equal specificity numbers, the selector location will bethe determining factor, i.e., the one closest to the DOM element will beselected. By this definition, inline styles have the highest priority. Thenthere are rules in embedded style sheets which take precedence over rules inexternal style sheets.The CSS language also provides the possibility of using !important inthe declaration part of each rule. A property designated as important hasthe highest priority regardless of its specificity value or location.6Chapter 3Proposed CSS SmellsIn this chapter, we propose a set of eight CSS code smells, collected byanalyzing various CSS development resources4 5 6 7. To the best of ourknowledge, these smells are not detected by any of the available CSS analysistools.Based on the syntax of CSS, we categorize CSS code smell types intofour classes:File-based smells: each CSS file is considered as a whole and is markedas a smelly file if more than a number of specific poor patterns occurin that file;Rule-based smells: each CSS rule is considered as a code block and ismarked as a smell if it is found to be smelly based on the smell detectioncriteria;Selector-based smells: the selector part of a rule is considered as a wholeand marked as a smell if any of its selector units are smelly;Property-based smells: a declaration of a rule is marked as a smell if itsproperty or its value is smelly;3.1 SmellsTable 3.1 summarizes our proposed set of smells, their type, and detectioncriteria. In this subsection, we describe each of these smells.4http://csswizardry.com/2012/11/code-smells-in-css/5http://css-tricks.com/magic-numbers-in-css/6http://www.blogherald.com/2006/09/08/css-tips-and-tricks/7http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/73.1. SmellsTable 3.1: Our proposed list of smells, detected by CSSNose and includedin our empirical study.CSS Smell Detection Criteria TypeNone-External Rules Embedded and inline CSScodeRule-basedToo Long Rules (#Properties > τp, τp = 5(section 3.2))Rule-basedToo Much Cascading (#Selector Units > τs, τs =4 (section 3.2))Selector-basedHigh Specificity Values (#IDUnits > τi, τi = 1or #ClassUnits > τc, τc =2 or #ElementUnits >τe, τe = 3) (section 3.2)Selector-basedSelectors with ErroneousAdjoining PatternNo white space betweenclasses or IDsSelector-basedToo General Selectors Selectors equal to html,head, title, body, div,header, asideSelector-basedProperties with Hard-CodedValuesAbsolute property values us-ing hard-coded/magic num-bersProperty-basedUndoing Styles Property values equal to 0 or‘none’Property-based3.1.1 Non-External RulesCSS was designed as a means to achieve separation of concerns. CSS codeitself should not be intertwined with HTML code. Thus, CSS rules shouldbe defined in external files, and not in HTML documents. Defining CSSrules in external files separates presentation from HTML structure, which inturn enables a more efficient content authoring and sharing [7]. In addition,writing CSS in external style sheets enables code reuse, meaning that thesame style sheet can be applied to different documents. This approach isideal when the style is applied to many pages since the look and feel of theentire web application can be changed by modifying only one file. CSS codethat is inline or embedded in HTML documents is a smell that adverselyinfluences code reuse and maintainability.83.1. Smells3.1.2 Too Long RulesSimilar to too long methods in object-oriented languages [8, 9], CSS ruleswith too many declarations can result in complex styling code, which canbecome hard to maintain. In addition, when a rule applies too many stylingproperties to selected DOM elements, often other rules need to be writtento undo some of the effects. Hence, we consider each CSS rule with thetotal number of properties greater than a specific threshold τp as a smell.The approach for determining the value of this threshold is fully describedin section 3.2.3.1.3 Too Much CascadingToo much cascading in the selector part of a rule is a bad pattern since theDOM elements selected become too specific. We consider a selector as toospecific with too much cascading when the total number of its selector unitsexceeds a specific threshold τs (see section 3.2). Figure 3.1 illustrates a toospecific selector with too much cascading smell that consists of five selectorunits.1 body div#test p.example {2 color : blue;3 }Figure 3.1: Selector with Too Much Cascading3.1.4 High Specificity ValuesFor selectors with too much cascading, the number of selector units deter-mines whether the selector is smelly. However, a high specificity value canalso indicate a CSS selector smell. Selectors with high specificity values aretypically fragile and inhibit the reusability of the styling code with evenminor changes in the structure of the DOM.For instance, the selector ‘#id1 #id2’ has only two selector units, butit has a specificity value (Equation 2.1) of 0200. Compare that to the se-lector ‘body div table tbody tr td’, which has six selector units, but aspecificity value of 0006.If hasHighSpecificity(sel) is a boolean function for identifying this type oftoo specific selectors with sel as its input selector and abcd as the specificityvalues of the selector units of sel (see Equation 2.1), then:93.1. SmellshasHighSpecificity(sel) ={true if b > τi ∨ c > τc ∨ d > τefalse otherwisewhere b, c, and d are the total number of ID, class and element units insel, respectively, and τi, τc, and τe are thresholds for these values to beconsidered as a smell (see section 3.2).Figure 3.2 shows selectors with high specificity values considering indi-vidual selector units and thresholds of τi = 1, τc = 2, and τe = 3.1 #id1 #id2 {2 color : red;3 }4 .class1 .class2 .class3 {5 border : 2px solid blue;6 }7 body div p span {8 font-size : small;9 }Figure 3.2: Selectors with High Specificity Values3.1.5 Selectors with Erroneous Adjoining PatternsWhen the white space between two selector units is removed, the selectorunits are considered to be adjoined erroneously. Since these adjoined selec-tors are syntactically wrong, they are not recognized by the browser. Suchselectors increase the CSS code size and browser workload without applyingany styling properties to the DOM. Hence, this type of smell can be con-sidered as an error type as well. Figure 3.3 depicts examples of selectorswith erroneous adjoining patterns. As it can be seen, selector adjoining canhappen between ID units, class units, ID/class units, and class/ID units.3.1.6 Too General SelectorsThis type of smell is the opposite of too specific selector smells. If the selectorpart of a rule selects all elements of the DOM based on their too generalelement type, the selector is considered too general. This type of selector issimply too broad and can ultimately lead to overridden style declarations103.1. Smells1 #id1#id2 {2 font-family: Arial;3 }4 .class1.class2 {5 color : gray;6 }7 #id1.class1 {8 line-height: 90%;9 }10 .class1#id1 {11 margin-left: 1cm;12 }Figure 3.3: Erroneous Adjoining Selectorsand undoing of CSS code. Figure 3.4 shows an example of this type of smell,which selects all div elements from the page.1 div {2 background-color : 00FF00;3 }4 body {5 color: silver;6 }Figure 3.4: Too General SelectorWe propose the following element types as too general when used asstandalone selectors: html, head, body, div, header, aside; although thislist is configurable in our smell detection engine.3.1.7 Properties with Hard-Coded ValuesThis type of smell includes properties that have absolute or hard-codednumbers for their values. These numbers, also referred to as magic numbers,are not flexible meaning that when unexpected changes occur (e.g., in HTMLstructure or content), these absolute numbers fail to style the page properlyand thus need to be adjusted. As a result, hard-coded values can causeunexpected problems in the visual layout of the application. For instance,Figure 3.6 shows CSS and HTML code snippets of the tabbed menu shownin Figure 3.5. In this example hard-coded values are defined for padding,113.2. Smell Thresholdsborder and width properties. As a result, a longer text for Tab 2 resultsin an inappropriate page layout due to a fixed value (2 cm) for the width ofeach tab.(a) Tabbed menu with short text in all tabs (b) Tabbed menu with longer text in Tab 2Figure 3.5: Incorrect menu styling as a result of hard-coded CSS properties.Instead of hard-coded values, it is a better practice to define propertyvalues relatively, e.g., using percentages.3.1.8 Undoing StylesRules that define properties with values equal to 0 or ‘none’ reveal an un-doing style pattern. This generally indicates that some of the CSS code hasbeen applied too early or too broadly and now these rules are resetting thevalues to their default values. This undoing style pattern is considered asmell.Figure 3.7 shows an example of this undoing style pattern. The bor-der and padding properties are set for all span elements and their childrenthrough CSS inheritance. However, in line 6 these properties are reset. Thisstyle of coding requires extra effort to write and maintain.3.2 Smell ThresholdsIn our proposed set of smells, there are three types, namely Too Long Rules,Selectors with Too Much Cascading and Selectors with High Specificity Val-ues, which have thresholds in their definition to be considered as a smell.To determine the values for thresholds τp (Too Long Rules) and τs (TooMuch Cascading), we conduct a small-scale study to take advantage of sta-tistical evidence in addition to logical reasoning and development experience.To that end, we measure the number of CSS selector units and propertiesin 20 unique websites and compute their descriptive statistics. 10 of thesewebsites are Alexa’s8 top 10 and the other 10 is selected randomly using a8 http://www.alexa.com/topsites123.2. Smell Thresholds1 <style >2 ul {list-style: none ;}3 ul li {float: left;}4 ul li a {background-color: rgb (255 ,216 ,155);5 color: black; display: block;6 padding: 5px 15px; text-decoration: none ;7 border-right: 1px solid #f5ab36; width : 2cm;8 }9 </style >10 <ul>11 <li ><a href="url1">Economy </a></li >12 <li ><a href="url2">Sports </a></li >13 <li ><a href="url3">Weather </a></li >14 <li ><a href="url4">More </a></li >15 </ul >Figure 3.6: Hard-coded values for the Menu shown in Figure 3.51 span {2 border: 5px solid black;3 padding : 5px 15px;4 }5 .contentpane {6 border: none ;7 padding : 0 0;8 }Figure 3.7: Undoing Style CSS Coderandom URL generator9.The results of this analysis are shown in Table 3.2. Using these results,we define:τp = dMeanpe+ 2 , τs = dMeanse+ 2 (3.1)where:• dMeanpe is the smallest integer greater than or equal to Meanp,where Meanp =n∑i=1Meanpin . n is total number of websites (i.e., 20) and9 http://www.randomwebsite.com/133.2. Smell ThresholdsTable 3.2: Descriptive statistics on the number of CSS selector units andproperties, for 20 websites.# properties in one rule # selector units in one selectorID Website Min Mean Median Max Min Mean Median Max1 Google 0 2.16 1 13 1 1.40 1 62 Facebook 0 2.42 2 15 1 1.96 2 73 Youtube 0 2.75 2 12 1 1.36 1 54 Yahoo 0 1.98 1 15 1 2.26 2 115 Baidu 0 2.16 1 15 1 1.75 1 56 Wikipedia 0 2.50 1 8 1 1.40 1 27 qq 0 3.97 2 14 1 2.14 2 88 Taobao 0 2.48 2 15 1 2.13 2 99 Live 0 1.93 2 9 0 1.58 1 610 Linkedin 0 2.38 2 16 1 2.72 3 911 Dvdmaniac 0 2.62 1 24 1 1.82 1 612 Whitestuff 0 2.06 2 10 1 1.77 2 413 Thespot 0 2.63 2 16 1 2.34 2 1514 Javascriptkit 1 1.93 1 9 0 2.21 2 615 Angelfire 0 2.73 2 10 1 1.84 2 516 Megnut 0 2.44 2 11 1 2.17 2 717 Kickerclub 0 2.38 2 7 0 1.56 1 318 Bandwidthplace 0 1.81 1 16 1 2.07 2 919 Pensacolaswing 0 2.72 2 17 1 2.84 2 1120 Onlamp 1 4.03 3 15 1 1.36 1 2Overall 0 2.5 2 24 0 1.9 2 15Meanpi is the average number of properties in each rule of the websitewith ID = i(i = 1, ..., n.) which in turn is obtained by Meanpi =#Total Properties in Website(i)#Total Rules in Website(i)• τp is the smell threshold in terms of the number of properties in a CSSrule, which is computed as d2.5e+ 2 = 5.• dMeanse is the smallest integer greater than or equal to Means,where Means =n∑i=1Meansin , n is the total number of websites (20)and Meansi is the average number of selector units in a selector forwebsite with ID = i (i=1,...,n.) which is computed as Meansi =#Total Selector Units in Website(i)#Total Selectors in Website(i)• τs is the smell threshold in terms of the total number of selector unitsin one selector, which is determined as d1.9e+ 2 = 4 in our study.According to these thresholds, rules with total number of propertiesgreater than five and selectors with more than four selector units should bereported as smells.143.3. Smell DetectionIn order to define thresholds for the High Specificity Values smell, wetake advantage of the definition of the specificity number (a, b, c, d) to com-pute the impact levels of different selector types. We ignore the left-mostdigit (a) since we have included non-external CSS rules in a separate cate-gory of smells. According to Equation 2.1, b, representing the total numberof ID types, is the next most significant digit with the highest level of im-pact on the specificity value of a selector. c, representing the total numberof class units has the second level of impact after b, and d, representing thetotal number of element units, has the lowest level of impact in the speci-ficity value which should consequently have a larger threshold compared tonumber of ID and class units. Based on the above-mentioned rationality, wedefine thresholds as follows:τi = 1 , τc = 2 , τe = 3 (3.2)This means a selector has high specificity values if at least one of thefollowing criteria is satisfied:• Number of ID units in the selector part is greater than one;• Number of class units in the selector part is greater than two;• Number of element units in the selector part is greater than three;3.3 Smell DetectionIn order to detect the eight proposed smells, we have implemented a CSSsmell detector called CSSNose. CSSNose is built as an extension to Cilla[1]. It uses dynamic crawling using Crawljax [10] to collect the CSS codeof a given website. The collected CSS code is then processed using staticanalysis, to search for patterns of the proposed smell types, using the definedsmell thresholds (See Table 3.1 and section 3.2). CSSNose then generatesa report visualizing all instances of the detected CSS smells in the code.3.4 EvaluationTo evaluate the accuracy of CSSNose, we compute its precision rate (PR)and recall rate (RR) as follows:PR =TPTP + FPand RR =TPTP + FN153.4. Evaluationwhere TP , FP and FN are true positives, false positives and false negatives,respectively. PR identifies the rate of true smells among the detected smellsand RR determines the effectiveness of the approach in identifying the truesmells among all existing smells.Computing these rates is a manual and time consuming task. To limitthe amount of time needed for this step, we evaluate CSSNose on the 20websites listed in Table 3.2.We ran CSSNose on each of the 20 websites and examined the reportgenerated for the eight proposed types of smells. We examined more than350,000 lines of CSS code manually to count TP , FP , and FN . This processtook us 11 days (10 working hours per day) in total.Total number of true smells in the 20 websites under evaluation was51,814. We did not find any false negatives, which was expected since CSS-Nose does not miss any lines of the CSS code in its static analysis process.We found 216 false positives in total (in 52,030 detected smells), which weremainly due to CSS parsing errors and could be resolved easily. For instance,a false positive detected by CSSNose is {color: blu2e;}. CSSNosemistakenly reports this property as a ‘Properties with hard-coded values’smell. Table 3.3 fully depicts the precision rates of CSSNose in detectingour proposed set of smells for each of the 20 websites.The overall recall and precision rates of CSSNose are 100% and 99.6%,respectively, which point to the high level of accuracy of the tool.163.4.EvaluationTable 3.3: Precision Rate (%): NA means the website does not have that type of smellPrecision Rate (%) forEach Type of SmellWebsite Li ne so fCSSCodeTo ta l#De te ct edSme ll sTo ta l#Tr ueSme ll sTo ta l#Fa ls ePo si ti ve sNo ne -Ext er na lRul esTooLo ngRul esTooMuc hCa sc adi ngHi ghSpe ci fic it yVa lue sEr ro ne ousAdj oi ni ngTooGe ne ra lSe le ct or sHa rd- Code dVa lue sUndo ingSt yl esOv er al lPr ec is io nRa te( %)Google 36,552 962 954 8 100.0 100 100 100 100 100 98.2 100 99.2Facebook 22,694 9,452 9,450 2 99.9 100 100 100 100 100 100.0 100 100.0Youtube 25,976 2,677 2,665 12 100.0 100 100 100 100 100 98.6 100 99.6Yahoo 39,583 10,011 9,919 92 97.9 100 100 100 100 100 98.9 100 99.1Baidu 3,176 1,392 1,389 3 99.7 100 100 100 100 100 99.7 100 99.8Wikipedia 113 31 30 1 100.0 100 NA NA NA NA 91.7 100 96.8qq 7,357 524 522 2 98.9 100 100 100 NA 100 99.6 100 99.6Taobao 80,509 4,231 4,224 7 98.3 100 100 100 100 100 99.9 100 99.8Live 2,484 722 714 8 100.0 100 100 100 100 100 98.6 100 98.9Linkedin 45,851 4,705 4,681 24 NA 100 100 100 100 100 98.8 100 99.5Dvdmanics 1,522 197 196 1 NA 100 NA 100 NA 100 99.1 100 99.5Whitestuff 35,094 8,662 8,647 15 100.0 100 100 100 100 100 99.7 100 99.8Thespot 3,172 612 608 4 100.0 100 100 100 100 100 98.6 100 99.3Javascriptkit 1,621 429 420 9 100.0 100 100 100 100 100 96.0 100 97.9Angelfire 3,012 952 947 5 NA 100 100 100 100 100 99.2 100 99.5Megnut 609 103 96 7 100.0 100 NA NA NA 100 90.7 100 93.2Kickerclub 11,186 2,224 2,222 2 100.0 100 100 100 100 100 99.9 100 99.9Bandwidthplace 8,520 1,306 1,299 7 100.0 100 100 100 100 100 98.9 100 99.5Pensacolaswing 4,800 156 156 0 NA 100 NA NA NA 100 100.0 100 100.0Onlamp 19,430 2,682 2,675 7 100.0 100 100 100 100 100 99.5 100 99.7Overall 353,261 52,030 51,814 216 99.7 100 100 100 100 100 98.3 100 99.617Chapter 4Empirical StudyIn this chapter, we describe our empirical study design to answer the fol-lowing research questions:RQ1 How pervasive are CSS code smells in deployed web applications?What are the most prevalent CSS code smells?RQ2 To what extent does each type of smell occur in CSS code of today’swebsites? What portion of CSS rules, selectors, and properties aresmelly?RQ3 Is there a correlation between CSS code characteristics and the num-ber of smell types/instances?4.1 Included CSS SmellsTo address the research questions, we study 26 CSS smell types and valida-tion violations in total. These include:• The eight smells proposed in this work and detected by CSSNose (seeTable 3.1 in chapter 3),• 16 types of CSS smells detected by the open-source CSS analysis toolCSS Lint.• Two CSS validation violations detected by W3C CSS Validator.Table 4.1 presents a concise overview of these 18 additional smells. Moredetailed descriptions can be found in Appendix A and in the CSS Lint 2and W3C CSS Validator 3 documentations online.184.1. Included CSS SmellsTable 4.1: List of smells and errors detected by CSS Lint and W3C CSSValidator included in our empirical studyTool CSS Smell TypeCSS LintEmpty Catch Rules: No property isdefined (#Properties = 0).Rule-basedUse of !important Property-basedUse of @import: Used to refer CSSfiles within other CSS files (nestedCSS).Rule-basedIDs in Selectors Selector-basedUnqualified Attribute Selectors:They match all elements first andthen check their attributes.Selector-basedQualified Headings: Heading ele-ments preceded by one or moreother selector types.Selector-basedAlready Defined Headings: Headingelements used more than once.Selector-basedUnits for Zero Values: Values suchas 0px or 0cm.Property-basedBox Model Size: Usingheight/width properties in con-junction with padding and border.Property-basedNot Using Shorthand Properties:Mazinanian et al [6] fully describesthis type and duplicate properties.Property-basedDuplicate Properties Property-basedUnknown Properties: Propertynames with typos.Property-basedNegative text-indent: Negativevalue for text-indent property.Property-basedUnderscore Hack: Use of ( ) beforethe property name.Property-basedToo Many Web Fonts: Use of morethan five @font-face in a file.File-based194.2. Smell Detection FrameworkTool CSS Smell TypeCSS Lint Too Many font-size: Use of 10 ormore font-size properties in a file.File-basedW3C CSS ValidatorParse Error: Syntactical issues inlines of CSS code such as missingbraces.Rule-basedValue Error: The value of aproperty is not recognized by thebrowser.Property-based4.2 Smell Detection FrameworkTo detect all the 26 smell types, we integrated CSSNose, CSS Lint, andW3C CSS Validator as a single smell detection framework, as depictedin Figure 4.1.The framework expects a URL as input, which is used for crawling thewebsite and collecting CSS data. The URL is also provided to W3C CSSValidator directly to check for CSS validation errors and warnings. CSS-Nose checks the extracted CSS code looking for smells discussed in chap-ter 3. The extracted CSS code is also saved into files and fed into CSS Lint.The final report contains instances of the 26 smell types and validation vi-olations.Our framework and empirical data are available for download at http://salt.ece.ubc.ca/software/cssnose/.4.3 Experimental ObjectsWe conduct our empirical study on a list of 500 unique websites in totalavailable in Appendix C. 350 websites are Alexa’s8 top sites and 150 arecollected randomly using a random URL generator9. In total, we investi-gate 5,060 CSS files, consisting of more than 10 million lines of CSS code.Table 4.2 shows descriptive characteristics of our experimental objects interms of the number of CSS files, Lines of CSS code, CSS rules, selectors,properties, and DOM states explored.204.4. SetupGet URLW3C ValidatorCodeSmellReportGenerateEventBrowser ServerCrawlAnalyzeDOMSmell Detection CriteriaCSSNose CSS RulesSave Rulesinto FilesCSS LintclickDOMchangedCollect CSS RulesFigure 4.1: Overview of our overall smell detection frameworkTable 4.2: Descriptive characteristics of the 500 experimental objectsMin Q1 Mean Median Q3 Max TotalCSS Files 1 2 10 5 14 79 5,060Lines of CSS Code 4 2,196 20,600 7,091 18,540 985,560 10,300,292CSS Rules 1 169 1,372 658 1,635 16,732 686,220CSS Selectors 0 201 1,800 808 2,191 20,378 900,049CSS Properties 0 523 4,570 2,167 5,647 66,873 2,284,859DOM States Crawled 1 1 25 20 50 50 12,3854.4 SetupThe URL of each of the 500 websites is fed automatically into our smelldetection framework (see Figure 4.1).To collect the CSS code of each website, we configure Crawljax to clickon the following DOM elements during crawling: a, div, image, button,span, and input. To constrain the time required, we set the maximumcrawling depth to 3 similar to other studies [11]. We also set the upper limitfor total number of DOM states to explore to 50, similar to other empiricalstudies [12]. We believe 50 pages is a large enough sample for extractingmost (if not all) of the CSS code of a given website.The code smell report generated for each website is saved and analyzedfurther using R10. Our empirical study was carried out during March–April2014.10http://www.r-project.org214.5. Results4.5 ResultsWe discuss the results of the empirical study in response to our three researchquestions.4.5.1 Pervasiveness (RQ1)Our data shows that CSS smells are widespread in today’s websites; 99.8%of the websites (i.e., 499 out 500) analyzed in our study contain at least onetype of CSS smells.Table 4.4 presents the pervasiveness of all the 26 smell types included inour study in terms of number of instances and percentage of sites exhibitingthe smell type. As this table shows, CSS properties with hard-coded valuesand undoing styles are the most prevalent CSS code smells, occurring in96% of the 500 websites, followed by too long rules and IDs in selectors in94% and 90% of the websites, respectively.4.5.2 Extent (RQ2)We examine the concept of extent from different aspects to answer RQ2.Number of Smell Instances/Types. Table 4.3 presents descriptivestatistics of the total number of smell instances and types occurring in our500 experimental objects.According to this table, half of our experimental websites have at least19 types of smells (out of 26 types of smells analyzed) in their CSS code.On average, there are 17.22 (out of 26) CSS smell types occurring in today’swebsites. In terms of the number of smell instances, half of the websiteshave at least 1,824 CSS smell instances and the average number of smellinstances is 3,975 (0.33 smells per line of CSS code).Table 4.3: Descriptive statistics of the total number of code smell types/in-stances (500 websites)Min Q1 Mean Median Q3 Max# Smell types 0 14.00 17.22 19.00 21.00 25.00# Smells 0 481.00 3,975.16 1,824.50 4,859.00 65,990.00# Smells per LOC 0 0.19 0.33 0.31 0.43 1.33Ratio to Total. The pie chart in Figure 4.2 depicts the ratio of the totalnumber of instances of each smell type to the total number of all detectedsmell instances. According to this chart, properties with hard-coded val-ues contain 39.4% of the total detected smells, followed by undoing styles224.5. ResultsTable 4.4: Pervasiveness of the 26 types of CSS smells in 500 websitesSmelly SitesSmell Type # %Non-External 371 74Too Long 469 94Too Much Cascading 359 72High Specificity Values 410 82Erroneous Adjoining Patterns 359 72Too General 426 85Hard-Coded Values 481 96Undoing Styles 481 96Empty Catch 414 83!important 407 81@import 67 13IDs in Selectors 449 90Unqualified Attribute Selectors 122 24Qualified Headings 372 74Already Defined Headings 361 72Units for Zero Values 373 75Box Model Size 443 89Not Using Shorthand Properties 110 22Duplicate Properties 305 61Unknown Properties 148 30Negative text-indent 255 51Underscore Hack 243 49Too Many Web Fonts 40 8Too Many font-size 388 78Parse Error 390 78Value Error 368 74(11.3%), IDs in selectors (8.6%), non-external rules (6.9%), and parse errors(5.1%).Number of Smell Instances of Each Type. The second column ofTable 4.5 (Total Number) presents descriptive statistics of the total num-ber of detected code smells. According to this table, there are on average1674 properties with hard-coded values and 420 properties with none or zerovalues in the 500 websites of our study.Half of the 500 websites have at least 61 selectors with high specificity234.5. ResultsHard-CodedValues(39.4%)Undoing Styles(11.3%)Non-ExternalCSS (6.9%)High Specificity Values (4.7%)IDs inSelectors (8.6%)Parse Error(5.1%) Too Long (3.7%)-Value Error (2%)-Box Model Size (2.3%)-Units for Zero Values (2%)-!important (2.9%)-Erroneous Adjoining (3.4%)-Too Much Cascading (2.2%)-Other (5.5%)Figure 4.2: Numerical proportion of the detected smell typesvalues and there is a website with 15893 rules defined as non-external.Figure 4.7 displays the distribution of smell instances for four smell types:hard-coded values, undoing styles, IDs in selectors and non-external rules.The violin plots for all other types of smells are shown in Appendix B.Percentage of Smelly Rules/Selectors/Properties.We further compute the percentage of the smelly code in our experi-mental objects with regard to each smell type individually to figure out theextent of smelly rules, selectors or properties. If st is a smell type and NSis total number of smells of type st, we then have:%SmellyCode(st)=NSTotalRules ∗ 100 if st is rule-basedNSTotalSelectors ∗ 100 if st is selector-basedNSTotalProperties ∗ 100 if st is property-basedNSTotalF iles ∗ 100 if st is file-based(4.1)Using this function, on average 36% of property values are hard-coded.23% of rules are embedded and 12% of CSS selectors have high specificityvalues. Also 35% of CSS files use too many font-size properties. The resultsare shown in the last column of Table 4.5 (Percentage).244.5. Results0 5000 10000 15000Hard−coded values lMean= 1674Mean  1674    0                                5000                           10000                         15000(a) Properties with hard-coded values0 500 1000 1500 2000Undoing styles lMean= 420  0                        500                    1000                  1500                    2000Mea = 420(b) Properties with undoing style values0 1000 2000 3000 4000IDs in selectors lMean= 349   0                      1000                   2000                   3000                    4000Mean= 349(c) Selectors with IDs0 500 1000 1500 2000 2500 3000Non−external CSS lMean= 230Mean= 230  0               500           1000          1500             20002000           2500          3000(d) Non-external CSS rulesFigure 4.3: Distribution of the total number of smell instances of CSS smelltypes with the largest instance proportions among all detected smells.254.5.ResultsTable 4.5: Descriptive statistics of detected code smells (500 websites)Total Number PercentageSmell Type Min Q1 Mean Med Q3 Max Min Q1 Mean Med Q3 MaxNon-External 0 0 230 27 135 15,893 0 0 23 5 29 100Too Long 0 15 132 62 180 958 0 7 12 11 15 65Too Much Cascading 0 0 138 16 133 3,205 0 0 6 3 8 48High Specificity Values 0 4 296 61 317 5,103 0 2 12 7 18 68Erroneous Adjoining Patterns 0 0 218 23 171 5,934 0 0 9 4 11 100Too General 0 2 12 7 13 241 0 1 2 1 2 43Hard-Coded Values 0 182 1,674 722 2,065 47,826 0 29 36 36 43 100Undoing Styles 0 57 420 172 527 3,638 0 8 12 10 12 100Empty Catch 0 2 26 9 28 804 0 1 3 2 3 50!important 0 2 123 22 109 3,080 0 1 4 2 3 100@import 0 0 2 0 0 257 0 0 2 0 0 100IDs in Selectors 0 18 349 97 378 8,770 0 5 22 16 34 100Unqualified Attribute Selectors 0 0 6 0 0 877 0 0 1 0 0 5Qualified Headings 0 0 54 11 57 839 0 1 3 2 4 36Already Defined Headings 0 0 44 12 45 684 0 0 2 2 4 20Units for Zero Values 0 0 63 9 46 1,693 0 0 2 0 2 31Box Model Size 0 7 82 38 110 751 0 1 2 2 3 20Not Using Shorthand Properties 0 0 1 0 0 95 0 0 1 0 0 18Duplicate Properties 0 0 6 2 7 125 0 0 1 1 1 2Unknown Properties 0 0 2 0 1 85 0 0 1 0 1 12Negative text-indent 0 0 6 1 5 550 0 0 1 1 1 8Underscore Hack 0 0 12 0 9 392 0 0 1 0 1 5Too Many Web Fonts 0 0 0 0 0 3 0 0 2 0 0 100Too Many font-size 0 1 3 1 3 37 0 6 35 25 50 100Parse Error 0 1 62 16 64 1,439 0 0 3 0 0 100Value Error 0 0 13 4 12 306 0 0 11 2 8 100264.5. Results4.5.3 Correlations (RQ3)To investigate correlations, we calculate the Spearman correlation coeffi-cients [13] and p-values [14] between the total number of smell types/in-stances and different CSS code metrics, using R.The Spearman correlation coefficient is a number between -1 and 1. 0indicates no correlation between two data sets. 1 indicates a positive strongcorrelation and -1 shows a negative strong correlation.CSS Metrics. The code metrics we investigate for correlations includenumber of CSS LOC, CSS files, CSS rules, selectors, properties, and class/ele-ment/ID units.We also include three CSS code quality metrics defined by Keller andNussbaumer [7] in our study. These metrics are defined as follows:Universality =# ES# Total Selectors(4.2)where # ES is the number of selectors ending with an element unit, e.g.,.news DIV.Average Scope =m∑i=1#DOM elements selected by selector (i)n ∗m(4.3)where m is the total number of selectors and n is the total number of DOMelements.Abstractness Factor = min(Universality, Average Scope) (4.4)The output of these metrics are numbers between 0 and 1. The basicidea behind these CSS quality metrics is that the more general CSS selec-tors are (except for a limited number of too general selectors discussed inchapter 3), the higher the quality of the CSS code is in terms of reusabilityand maintenance.Table 4.6 depicts descriptive statistics of universality, average scope, andabstractness factor in the 500 analyzed websites, computed automaticallyby our smell detection framework. The low average values of these metricsis another indication of the poor quality of CSS code in the wild.Correlation Coefficients. Table 4.7 shows the Spearman correlation coef-ficients and p-values for the set of CSS code metrics compared with the smell274.5. ResultsTable 4.6: Descriptive statistics of universality, average scope and abstract-ness factor (500 websites)Min Q1 Mean Median Q3 MaxUniversality 0 0.163 0.303 0.284 0.419 1Average Scope 0 0.002 0.084 0.015 0.072 1Abstractness Factor 0 0.001 0.058 0.013 0.064 1instances and smell types. Figure 4.4 depicts their plots. Our results showthat there is a strong positive correlation between total number of smellinstances and number of CSS rules, selectors and properties (corr = 0.96,0.92, 0.97, respectively). Total IDs, classes, and elements also show a posi-tive correlation.Table 4.7: Spearman correlation coefficients (corr) with p-values betweenCSS code smell instances/types and CSS code metrics# Smell Instances # Smell TypesMetric corr p-value corr p-valueTotal Properties 0.97 < 2.2e−16 0.51 < 2.2e−16Total Rules 0.96 < 2.2e−16 0.52 < 2.2e−16Total Selectors 0.92 < 2.2e−16 0.51 < 2.2e−16Total Class Units 0.90 < 2.2e−16 0.50 < 2.2e−16Total Element Units 0.77 < 2.2e−16 0.50 < 2.2e−16Total ID Units 0.68 < 2.2e−16 0.38 < 2.2e−16Total CSS Files 0.45 < 2.2e−16 0.36 < 2.2e−16Total Lines of CSS Code 0.40 < 2.2e−16 0.13 3.6e−3Abstractness Factor -0.23 4.5e−7 -0.38 < 2.2e−16Average Scope -0.16 2.8e−4 -0.29 3.3e−11Universality -0.15 8.4e−4 -0.09 3.9e−2For the three quality metrics, namely universality, average scope, and ab-stractness factor, we do not see a significant correlation with smell instancesin terms of magnitude, but the negative signs (corr = −0.15, corr = −0.16,corr = −0.23) indicate inverse correlations, which aligns with the conceptbehind these quality metrics, i.e., the higher the quality the less likely therewill be smells in the code.284.5.Resultslll lll l ll lll ll llllll llllll lllll l llllllllllll ll llllll ll l ll l llllllllll lllllllll llllllll l lll l ll llll l ll llllll lll l lll lllllll l ll lll ll llllll ll lll lll llllllllll llll l lllll lll lll ll lllll l ll l0 20000 40000 60000 800000100003000050000# CSS Smells# CSS Properties0102030405060*1000 =# Properties 0                     20                    40               60                    8040*1000 = # CSS Smell Instances(a) Props: corr =0.97, p < 2.2e−16llllll l ll lll l lll lllllllll lllllll lllllllll ll lllll lllll l ll l llllllllll lllllllllll l llllll l lll l ll llll l ll lll lllll lllllll llllll l llll ll llllll l ll llllll llllll llllll llllll l lllll l llllllll l lll l ll l0 20000 40000 60000 80000050001000015000# CSS Smells# CSS Rules  0                     20                   40                    60                    80*1000 = # C  Smell Instances051015*1000 = *1000 =# CSS RulesRules # ules(b) Rules: corr = 0.96, p <2.2e−16llllll l ll lll l lll llllll lllll llllll lllllllllll ll lllll ll ll lllllllllll llllllllllll l lllll lll llll ll llll lllllllll lll lllll lllllll ll lllll llll lll l ll llllll lll lllll llll llllll llll lllll lll llllll llll l lll ll l l ll0 20000 40000 60000 8000005000100001500020000# CSS Smells# CSS Selectors05101520*1000 =# Selectors 0                     20                   40                  60                    80 *1000 = # CSS Smell Instances0                                                                                 ll(c) Selectors: corr =0.92, p < 2.2e−16llllll l lllll lll llllll llllllllllllllllllllllll llllllll l lllllllllll ll lllllllllllll llll llll l lll l llll ll llll lllllllllll lll ll lll l llllll llllll ll l llllll ll l lllll llllllllllllll lll lllll llll ll ll l lllll llll ll ll lll llll ll0 20000 40000 60000 80000050001000015000200002500030000# CSS Smells# Class Units  0                    20                    40                    60                    80*1000 = # CSS Smell Instances 051015202530*1000 =# Class Units(d) Classes: corr =0.90, p < 2.2e−16l lllll l ll lll l ll llllll ll llllllll lll llllllll llll ll llll ll lll ll l lll lllllllllllllll llllll lllllllllll lll llll ll l llll lll lllll l ll lllllll lll l l lll l lll ll lllll lllllllllll ll l l ll lllll llll lllllllll llll ll lllll llllllll l lll lll lll llllll lll llll l ll ll l0 20000 40000 60000 80000020004000600080001000014000# CSS Smells# Element Units  0                     20                   40                    60                    80*1000 = # CSS Smell Instances024610 81214*1000 =# Element Units(e) Elements: corr =0.77, p < 2.2e−16l lllll l ll lll ll llll ll ll ll lllllll l l llll llll ll lll lllll ll lll ll ll ll lll lll lll l lllll lllllll lll l lll llll llll ll ll ll ll llll ll l lll llllllll l llllll lll ll ll lll l llll ll l ll lllll l ll l lll llllll ll lll llll lll ll l ll l lll ll ll l lll ll llll0 20000 40000 60000 800000200040006000800010000# CSS Smells# ID Units 02468102*1000 =# ID Units 0                     20                   40                    60                    80*1000 = # C  Smell Instances(f) IDs: corr = 0.68, p <2.2e−16l ll lll llllll lll llll ll llll llllllll ll llll ll llllll lllllllllll lll lll l lll llllllllllllll ll llllllllllll llllll lll llll l ll lll lllllllll ll ll lll lll lllll lllll llll l llll lllll lll l llllll l lllll lll ll lllll lll lllll l lll ll llllll lll lll ll ll lll lllll lll l lll llll ll lll l lllllll llll l ll llllll llll lll lll lll ll lllllll lllllllll lllll0 20000 40000 60000 80000020406080# CSS Smells# CSS Files# CSSFiles0204060800                     20                    40                   60                    80*1000 = # CSS Smell Instances(g) CSS Files: corr =0.45, p < 2.2e−16l ll lll l ll l ll l ll l lll ll ll lll l ll ll l ll ll lll l lll l lll l llll llll lll ll l lll lll ll llll lll ll ll l lll ll l l llllll ll ll ll ll llllll l lll lllll llll lll l lll lllll ll llll ll lll ll l lll ll0 20000 40000 60000 800000e+002e+054e+056e+058e+051e+06# CSS Smells# Lines of CSS Code0                     20                    40                    60                   80*1000 = # CS  mell Instances020406080100*10000 =CSS LOC(h) CSS LOC: corr =0.40, p < 2.2e−16l ll lll l ll l ll l lll l lll ll ll llll ll ll ll l lll llllllllll ll ll l llll l lllllll ll lllll llllll lll ll ll lll llll lllll lllll lll l llll l ll l l llll llll llll l llll l l ll lll ll llll l lllllll l ll l l llllllll l lllll lllllllll l lllll lllllllll ll ll llll l llll lllllll lll ll lll llllllllllllllllllll lll0 20000 40000 60000 800000.00.20.40.60.81.0# CSS SmellsAbstractness Factor0                     20                    40                   60                    80*1000 = # CSS Smell Instances0.00.20.40.60.81.0AbstractnessFactor(i) AbsFact.: corr =−0.23, p = 4.5e−7l ll lll l ll l ll l lll l lll ll ll llll ll ll ll l ll ll llllllllll ll l ll l llll l lll llll ll lllll lllllll lll lllll lll l llll l lll llllllllll lll l ll l l llll ll l llll l llll l l ll llll lll llll l lllllll l ll ll l llllllll ll lllll lll lllllll lllll lllllllll lll ll lllll l llll lllllllll lll lll llllllllll ll lll llllllllllll lll l lll ll0 20000 40000 60000 800000.00.20.40.60.8tree$total3tree$ave30                     20                    40                   60                    80*1000 = # CSS Smell Instances0.00.20.40.60.8AverageScope(j) Scope: corr =−0.16, p = 2.8e−4lll llll lllll l llll lll ll ll lllllllll ll ll l ll llll lllllllllllllll l llll lll lllllllll ll l lll lll lllll ll lllllll lllllll l lllllllllll ll lllll lll lll l lll llllllll lll llllll llll ll llll ll lllllllllll lllllllllllllll llll ll llll llll l lllll l llll llll lllllll llll lllllllll ll lllll llll lll lll ll lllllllll ll ll llll l lllll llllll lll lll l ll lll lllllllll llllll l lllll llllll llllllllllll lllll lllllllllll lllll llllllllllllllllllllllll lllllllllllllllllll lll0 20000 40000 60000 800000.00.20.40.60.81.0# CSS SmellsUniversality 0                     20                    40                   60                    80*1000 = # CSS Smell Instances0.00.20.40.60.81.0Universality(k) Univ.: corr =−0.15, p = 8.4e−4Figure 4.4: Scatter plots of total number of CSS smell instances versus CSS metrics. corr represents the Spearmancorrelation coefficient and p is the p-value.294.6. Unused Code Analysis4.6 Unused Code AnalysisUnused CSS code increases file size and browser workload while having noeffect on the web page design [1]. Hence, in addition to the 26 types of CSSsmells that are detected by performing static analysis, we also include andanalyze unused CSS code in this thesis. This type of smell is different fromthe previously mentioned smells in terms of the required type of analysis.Unused CSS code which consists of unused selectors and properties canbe placed in one of the following categories:• Unmatched selectors which do not match any elements in the Docu-ment Object Model (DOM) and their properties;• Matched but ineffective selectors and properties that match one ormore elements of the DOM but are ineffective due to being overriddenby style declaration of other selectors which have higher priority basedon the specificity value or location;Figure 4.5 designates some used and unused CSS code in an externalCSS file, considering the DOM state in Figure 4.6.1 div {2 text-decoration: overline; /* matched but ineffective */3 word-spacing : normal; /* used CSS */4 }5 p.today {6 background-color: yellow; /* used CSS */7 }8 #weather {9 color: red; /* matched but ineffective */10 /* overridden by an inline style */11 text-decoration: underline; /* used CSS */12 }13 p.update { /* unmatched selector */14 font-family: "arial"; /* unused */15 font-size: 100%; /* unused */16 }17 p {18 background-color: gray; /* matched but ineffective */19 }Figure 4.5: External CSS File (example.css)304.6. Unused Code Analysis1 <head >2 <link href="example.css" rel="stylesheet" type="text/css">3 </head >4 <body >5 <div id="weather" style="color:blue"> Weather Condition6 <p class="today"> Current Weather </p>7 </div >8 </body >Figure 4.6: DOM affected by CSS code in Figure 4.5To detect unused code, we perform dynamic analysis and compare ex-tracted and parsed CSS code on different crawled DOM elements. The corecomponent of CSSNose is Cilla, a tool used in a previous study of un-used CSS code [1]. Hence, our generated smell report includes statisticsof unmatched and ineffective CSS. However, in order to get correct insightinto CSS code of today’s websites, we have separated results of unused codefrom other types of smells. The reason behind this decision is that CSSNosecrawls web applications and automatically clicks on candidate clickables tocollect CSS data. To detect unused code, it performs dynamic analysis tocompare crawled DOM states with collected CSS. Since some of these DOMstates are only accessible by entering human inputs from a real user suchas usernames and passwords, some CSS code might be returned as unusedincorrectly while it is actually used in a DOM state that CSSNose has notbeen able to access. This problem occurs due to the nature of dynamicanalysis tools.To mitigate this problem, we exclude those websites with required humaninputs in analyzing results of our unused code smell to avoid false positives.For other types of smells, we have considered results of all 500 websites sincewe have used static analysis approach (no DOM access required) to detectall our smells except for the unused code. From our set of 500 websites,313 websites need inputs from users. Hence, we limit analysis of our un-used code study to the remaining 187 websites available in Appendix D.Characteristics of these 187 experimental objects are shown in Table 4.8.4.6.1 Unused Code PervasivenessUnused CSS code is widespread in today’s websites. Our data shows that94% of the websites (i.e., 175 out of 187) analyzed in our unused code study314.6. Unused Code AnalysisTable 4.8: Descriptive characteristics of the 187 experimental objects (Un-used Code Study)Min Q1 Mean Median Q3 MaxCSS Files 1 1 9 4 10 61Lines of CSS Code 4 895 8,214 2,737 9,946 209,152CSS Rules 1 64 707 203 726 10,009CSS Selectors 0 71 943 263 971 15,491CSS Properties 0 216 2,335 715 2,422 34,863DOM States Crawled 1 1 23 16 50 50contain at least one unused selector or property.4.6.2 Unused Code ExtentTable 4.9 and Table 4.10 indicate the extent of unused selectors and prop-erties in our 187 experimental websites. Our data confirms the results of astudy of unused code performed by Cilla [1]. In this previous study, on av-erage, 60% of selectors are reported as unused. In our experimental objects,on average 67.38% of selectors and 64.74% of properties are unused whichshows an increase of almost 8% in the amount of unused selectors whileconsidering a larger number of real world web applications. Table 4.11 alsopresents the percentage of size reduced in terms of bytes after applying theremoval of unused selectors and properties.Table 4.9: Descriptive statistics of unused CSS code in our 187 experimentalobjects (Total Number)Total NumberMin Q1 Mean Median Q3 MaxUnmatched Selectors 0 35 762.36 168 812 13,647Matched but Ineffective Selectors 0 0 8.39 3 10 126Unused Selectors 0 40 770.75 172 818 13,674Unused Properties 0 102 1,893.14 420 1,968 31,648Table 4.10: Descriptive statistics of unused CSS code in our 187 experimen-tal objects (Percentage)PercentageMin Q1 Mean Median Q3 MaxUnmatched Selectors 0 50.68 63.95 69.83 85.12 97.00Matched but Ineffective Selectors 0 0 3.43 0.78 2.65 90.74Unused Selectors 0 54.14 67.38 73.94 86.15 97.22Unused Properties 0 46.65 64.74 70.73 87.51 97.38324.6. Unused Code AnalysisTable 4.11: The size reduced in terms of bytes after applying the removal ofunused code (187 websites)Min Q1 Mean Median Q3 MaxSize Reduced (%) 0 31 41 45 53 88Figure 4.7 shows violin plots of the distribution of the unused code basedon the total number. As we can see, on average, 770.75 of selectors areunused in the 187 websites.0 2000 4000 6000 80001 l0                    2000                4000               6000                 8000Mean= 762.36(a) Unmatched selectors0 20 40 60 801 l0                      20                     40                  60                     80Mean= 8.39(b) Matched but ineffectiveselectors0 1000 2000 3000 4000 5000 6000 7000lMean= 770.75Mea = 770.750          1000      2000     3000       4000      5000      6000      7000(c) Unused selectors (unmatched +matched but ineffective selectors)0 5000 10000 15000lMean= 1893.14Mean  1893.140                      5000                 10000               15000(d) Unused propertiesFigure 4.7: Distribution of CSS Unused Code4.6.3 Unused Code CorrelationsSimilar to our response to RQ3 for the 26 types of smells, we consider corre-lations between the extent of unused code and CSS metrics. We also includethe number of crawled DOM states in our table of unused code correlations.The correlations between the total number of unused selectors/propertiesand CSS and DOM metrics are shown in Table 4.12.Similar to other types of smells, unused code has strong correlations withthe total number of rules, selectors and properties which is as expected sincewhen there is more CSS code, it is more difficult for a developer to authorand manage CSS code efficiently. The negative signs of the universality,334.6. Unused Code AnalysisTable 4.12: Spearman correlation coefficients (corr) with p-values betweenunused CSS selectors/properties and CSS code metrics# Unused Selectors # Unused PropertiesMetric corr p-value corr p-valueTotal Rules 0.998 < 2.2e−16 0.980 < 2.2e−16Total Properties 0.984 < 2.2e−16 0.994 < 2.2e−16Total Selectors 0.996 < 2.2e−16 0.979 < 2.2e−16Total Class Units 0.938 < 2.2e−16 0.924 < 2.2e−16Total Element Units 0.860 < 2.2e−16 0.854 < 2.2e−16Total ID Units 0.783 < 2.2e−16 0.746 < 2.2e−16Total CSS Files 0.610 < 2.2e−16 0.600 < 2.2e−16Total Lines of CSS Code 0.600 < 2.2e−16 0.660 < 2.2e−16# DOM States Crawled 0.160 1.6e−2 0.180 1.6e−2Abstractness Factor -0.200 6.6e−3 -0.190 9.6e−3Average Scope -0.140 6.9e−2 -0.120 9.8e−2Universality -0.090 2.3e−1 -0.100 1.9e−1average scope and abstractness factor coefficients also indicate an inversecorrelation between these metrics and the amount of unused code.34Chapter 5Smell Predictive ModelIn this chapter, we propose a model for predicting the total number of CSSsmells in a given website. We infer the predictive model from the large dataset collected in our empirical study. This inferred model can be used as ametric to help developers gain insight in the quality of their CSS code.Overall, in our approach we:• consider the 500 experimental websites as a learning sample and usethe collected empirical data as historical data (see chapter 4);• apply a suitable fault prediction technique to our historical data toinfer a predictive model (section 5.1);• evaluate the accuracy of our predictive model on a test sample of 50new websites (section 5.2);5.1 Predictive Model InferenceIn order to decide which predictive technique to apply on our historical data,we take advantage of the results of a comparative study on six predictivemodels conducted by Khoshgoftar and Seliya [15]. In their study, commonlyused techniques are ranked in terms of their predictive accuracy. Accordingto their results, the Least Absolute Deviation (LAD) method [16] is foundto be the method with the lowest prediction error. Hence, we use LAD inthis work.Least Absolute Deviation (LAD). is a mathematical optimization tech-nique for finding a function that closely approximates a set of data. Tobriefly formalize the problem, consider a set of data points (xi, yi), i =1, ..., n. LAD attempts to find a function f such that f(xi) ≈ yi by mini-mizing the sum of the absolute values of the residuals (i.e., observed value −predicted value) that is S =n∑i=1|yi − f(xi)|. In this formula, xi, i = 1, .., nis the set of explanators or predictor variables and yi is the response variablewhich needs to be predicted. In case of multiple explanators, we need to355.1. Predictive Model Inferencefind f(xij) ≈ yi, for i = 1, ..., n, j = 1, ...,m where n is total number ofdata points and m is the total number of predictor variables in the model.Model Parameters. To decide which parameters should be included inour model, we consider CSS metrics that correlate with the total numberof smells. Table 4.7 is a well-suited source of information for this purpose.Based on the empirically measured correlations, we select the following pa-rameters for our model:• Total Rules: the total number of CSS rules in the code of a website hasa strong correlation with the total number of code smells (corr = 0.96).• ID, class, and element units: these numbers are significantly correlatedwith the number of smells, as depicted in Figure 4.4. Hence, we includethe ratio of IDs, classes, and elements with the respect to the totalnumber of selectors in our model;• Universality: we also include universality (see Equation 4.2) to takeadvantage of a CSS code quality metric in our model.11.Note that we could have used other metrics such as the average scope orabstractness factor in our model; the main reasons we choose universalityis that this metric can be computed fast through static analysis and doesnot require the DOM elements affected in the scope of the CSS selectors(as required by the other metrics), which would need dynamic analysis toobtain.Our CSP Model. To define our predictive model, we apply LAD on ourdata sets using the model parameters. After trying several function typeson data points of the selected parameters, we infer a linear function forpredicting the total number of CSS code smells per line of code, in a givenwebsite. Our CSP (CSS Smell Predictor) model is then defined as follows:CSP LOC =CSPLOC(5.1)where LOC is the total number of lines of CSS code and CSP is the totalpredicted CSS smells, which in turn is computed as follows:CSP = 2.14(#Rules)− 44.97(Universality) + 67.84(#ID units#Selectors)+ 37.59(#Class units#Selectors)− 24.25(#Element units#Selectors)(5.2)11Using other metrics when proposing a new metric is a common practice. An exampleis the maintainability index [17]365.2. Model EvaluationBy applying LAD, we obtained a positive coefficient for the total numberof rules, which means that the more CSS rules we have, the more likely therewill be code smells. A negative coefficient for universality Equation 4.2 is asexpected and means that a higher universality value decreases the predictedtotal number of smells. The coefficient value for the ratio of class units(37.59) has a significantly smaller value compared to that of ID units (67.84)since using classes is a preferred pattern of writing CSS code.Note that if the CSP is computed to be a negative number, our modelreturns 0. We have to mention that this is very rare in practice, since thepositive factors in CSP are typically much larger than the negative factors;also in our evaluation of 50 websites, we did not witness any numbers below0 (see Figure 5.1).5.2 Model EvaluationIn order to evaluate the accuracy of our predictive model, we use a testsample consisting of 50 websites. These websites are collected randomlyusing a random URL generator 9 and are not in the list of 500 websites usedin our empirical study.For each website, we measure the actual number of CSS smells as wellas the predicted value computed by CSP. Figure 5.1 (a) depicts the actualand predicted values and their differences for the 50 websites in our testsample. As we can see, except for a few outliers, the difference between theactual and predicted values is small, which points to the accuracy of ourCSP model. Figure 5.1 (b) shows actual and predicted values consideringthe diagonal line (y = x). If each website in our test sample is representedby a pair of coordinates (x, y) in which x is the actual number of smells any is the predicted value, we have (y = x) for the websites with equal actualand predicted values, which is a perfect estimation. Hence, the closer thepoints are to the diagonal line, the smaller the differences between actualand estimated values, and consequently, the more reliable the model is. Aswe can see, for almost all of the websites in our test sample, the points arevery close to the diagonal line, which is a good sign for the accuracy of ourmodel.Further, we use two well-known statistical techniques for evaluating pre-dictive models, namely, residual plots and prediction errors.Residual Plots. According to Garson [18], residuals analysis is a commonapproach in evaluating proposed models. A good predictive model has arandom scatter plot of residuals (actual value − predicted value) against375.2. Model Evaluation1.00 10.00 20.00 30.00 40.00 50.00Website ID0.024.699.3714.0518.50*1000=#SmellsActual ValuePredicted Value(a) Total number of smells in a website: Actual values vs. valuespredicted by our model and their differences0.00 4.00 8.00 12.00 16.00*1000 = # Actual Smells0.002.004.006.008.0010.0012.00*1000=#PredictedSmells(b) Actual vs. predicted valuesFigure 5.1: Actual versus predicated valuesfitted (predicted) values, with no specific shape. Otherwise, there is somepart of the data which is not covered and considered by the model. Themedian of the residuals should be zero or near zero and residual valuesneed to be randomly negative and positive in order to form horizontal areasaround the zero line. In addition, the histogram of residuals should depicta distribution close to normal.Figure 5.2 depicts (a) a scatter plot, (b) a box plot, and (c) a histogramof the residuals of our proposed CSP model. In the scatter plot, we cansee an almost random shape of residual points distributed as positive andnegative values. This random shape is more obvious for the websites withless than 2000 number of smells. Since the residuals of our model do not fol-low a specific pattern and are randomly distributed, we can infer our modelproperly covers the population data. In addition, consistent distribution ofpositive and negative residual values, which is a sign of a good model, resultsin a zero or close to zero median of residuals. The median of residuals for our385.2. Model Evaluation0.00 2000.00 4000.00 6000.00Predicted Values-600.00-200.000.00200.00600.001000.001400.001800.002200.00Residual(a) Predicted values versus residualsResiduals02,0004,000133.5(b) Box plot of residuals0 2,000 4,000051015ResidualFrequency(c) Histogram of residualsFigure 5.2: Diagrams of residualsmodel is 133.5 which is considered as a value close to zero considering thehigh number of CSS smells occurring in today’s websites (see Table 4.3 andTable 4.5). The box plot shown in Figure 5.2 (b) is a better representationof the median and its difference with the zero value. Finally, a normal dis-tribution of residuals is a result of real-valued random variables. Hence, thecloser the distribution of residuals is to normal, the higher the accuracy ofthe predictive model is. The shape of the histogram of our residuals shownin Figure 5.2 (c) reveals a distribution close to normal.Prediction Errors. There are several methods in statistics which computeerrors in a predictive model. We use normalized root mean square error(NRMSE) [19], relative absolute error (RAE) [20], normalized mean absoluteerror (NMAE) [21], [22] and average relative error (ARE) [15] to evaluate ourmodel. These errors are numbers from zero to infinity and are defined basedon the differences between the actual and predicted values. The residuals((yˆi − yi)) are numerators of the error fractions. Hence, the smaller theresiduals are, the lower the error value is and the predictive model is moreaccurate.395.2. Model EvaluationTable 5.1: Prediction errors and their values for our model: yˆi, yi and n arepredicted values, actual values and the number of predictions, respectively.y¯, ymax and ymin are the mean, maximum and minimum of the actual values.PredictionErrorFormulaError Valueof our ModelNRMSE√n∑i=1(yˆi−yi)2nymax−ymin0.05RAEn∑i=1|yˆi−yi|n∑i=1|yi−y¯|0.24NMAEn∑i=1|yˆi−yi|ymax−ymin1.15AREn∑i=1| yˆi−yiyi+1|n0.33The error formulas used and their values for our model are shown inTable 5.1. We can see that the error values of our model are small andclose to zero, which indicates that differences between the actual numberof CSS smells in a website and the number predicted by our model are notsignificant.Overall, these evaluation results indicate that our proposed CSP modelhas a high accuracy in predicting the number of CSS smells.40Chapter 6DiscussionIn this chapter, we discuss some of the implications of our findings, limita-tions of our work, and threats to validity of our study.6.1 ImplicationsOur study provides the largest empirical study on CSS to date in terms ofthe total number of websites analyzed and the diversity of CSS smell types.Our results reveal that poor CSS code is highly pervasive in today’s websites.In terms of the most prevalent types of smells, properties with hard-codedvalues and undoing styles occur in 96% of the websites followed by too longrules and using IDs in selectors. Among these four most prevalent smells,three of them are proposed in this work and reported by our CSSNose smelldetector tool; one of them (IDs in selectors) is detected by an existing toolCSS Lint. In addition, as shown in Figure 4.2, 72.4% of the total detectedsmells belong to the eight smell types proposed in our work. This pointsto the lack of proper tool support for developers in detecting CSS smells.CSSNose can help web developers to detect such prevalent smells duringtheir development cycles.The results of our study also indicate that properties with hard-codedvalues and undoing styles are not only among the most prevalent CSS codesmells occurring in 96% of the websites, but they form the majority of thedetected CSS code smells. These two smells form 39.4% and 11.3% of alldetected smells, respectively. One of the reasons might be due to the factthat the total number of properties in CSS code of a website is usuallylarger than the total number of selectors, since each selector could havemore than one defined property and hence, property-based smells comprisea higher proportion of CSS smells. However, we can see that there areother property-based smells such as using !important, underscore hack, andunits for zero values which comprise a very small proportion of the detectedsmells. In addition, on average 36% of the properties in today’s websitesare hard-coded and 12% of the property values apply undoing style; thatis a significant percentage of the smelly code. One explanation behind this416.2. Code Smellscould be that developers are not aware of the inheritance characteristics ofCSS code. Hence, they might focus on specific portions of the page andapply styling rules locally, necessitating the application of the style undoingpattern, later on.Figure 6.1 depicts a snippet of actual CSS code taken from one of ourexperimental websites12. In the first line, hard-coded values are defined forthe margin of all list elements with class attribute equal to ‘entry’. Thenext rule adds a padding and undoes the margin values. Interestingly, thispadding is also undone in the next rule (line 12).1 body.entry li {2 margin: 7px 0 8px 10px;3 }45 .enrtry ol {6 padding: 0 0 0 35px;7 margin: 0;8 }910 .entry ol li {11 margin :0;12 padding :0;13 }Figure 6.1: Poor CSS patterns in a real world CSS fileThis is a simple example of poor CSS code in a real-world website. Inthis example all the CSS rules are defined in a single CSS file. The problem,however, becomes more severe when there are several CSS files with thou-sands of lines of code, making it more difficult for developers to write cleanrules.6.2 Code SmellsA list of code smells is never complete. In addition, some poor code patternsmight be considered as acceptable code due to different needs of developers;This means that different detection criteria and thresholds can be definedfor different scenarios. The set of eight smell types we propose in this work12www.dvdmaniac.net426.3. Our Predictive Modelis the result of investigating a wide range of CSS development resources andcode quality tools to include smell patterns that are (1) generally consideredas a smell by the web development community, and (2) not already includedin other CSS analysis tools. In terms of smell thresholds, we conducted astudy on 20 websites to define unbiased thresholds based on average num-bers, for too long rules and selectors with too much cascading. For selectorswith high specificity values, we used the definition of the specificity number(Equation 2.1) to differentiate between ID units, class units, and elementunits, based on their level of impact on the specificity value of a selector.However, finding the most appropriate threshold is tricky and sometimescase-dependent. Despite the fact that we have used a combination of devel-opment experience, and statistical rationality to define reliable smell detec-tion criteria, these thresholds can be modified in CSSNose, which in turncan influence the number of smells detected.Sometimes some properties are considered as unused while they areequivalent to other properties and are intentionally added for the purposeof browser compatibility. For instance, in Figure 6.2, the same color hasbeen defined as both hexadecimal and rgb values to deal with varying levelsof browser support. Some browsers support rgb color while others do not.Hence, the following pattern is appropriate and common.1 p {2 color : #181818;3 color : rgb (24 ,24 ,24);4 }Figure 6.2: Equivalent properties intentionally added for browser compati-bilityWe have considered the possibility of these equivalent properties in iden-tifying duplicate properties detected by CSS Lint but not in our unused codedetection. Hence, we might have some false positives in reporting unusedproperties. However, our detailed analysis of today’s CSS shows that thenumber of this type of properties is not significant and can be easily ignored.6.3 Our Predictive ModelTo choose the predictive technique, we used the results of a previous com-parison study [15] to select LAD. To infer the model parameters, we usedour large empirical data. In addition, we used two well-known statistical436.4. Threats to Validitytechniques, residual analysis and prediction errors, to evaluate the accuracyof our model. The results indicate a high level of accuracy for our CSPmodel. However, similar to all other predictive models, we cannot claimthat our CSP model always produces accurate results that match the realnumber of CSS smells in a website. The goal of our predictive model isto easily provide developers with an estimation of the number of smells intheir CSS code. CSS files can also be fed into this model and be prioritizedbased on the number of possible smells they include in their code. In caseof limited resources, the static analysis can be performed on only those CSSmodules which have a larger number of predicted CSS smells.The discussion of our model also reveals a rationality behind the coeffi-cients and defined relations.6.4 Threats to ValiditySome of the threats to validity have been discussed above in this chapter.To make the results of our study as generalizable as possible, we have col-lected CSS data of 500 websites, with more than 10 million lines of CSScode. To obtain a representative sample, we have selected the URL of 350Alexa’s top websites in addition to 150 URLs selected randomly. We believethat studying 500 websites gives us a reliable dataset. One threat that isunavoidable in empirical studies that use online web applications is that theexperimental objects and their CSS code might change in the future mak-ing exact replications of the study impossible. Nevertheless, we make thelist of the analyzed 500 websites, the dataset, as well as our CSSNose andframework available for download.44Chapter 7Related WorkWe classify the related work into three categories.7.1 Code SmellsThere is a wide range of papers discussing code smells in general. Most ofthose have targeted the Java language. Murphy-Hill and Black [24] proposea smell detector tool for Java based on seven principles which are the basisof a highly effective smell detector. Hamid et al [25] conduct a comparativestudy on different smell detection tools. A set of refactoring guidelines forcode smells in Java is proposed by Fowler et al [26]. Khomh et al [27]show that classes with code smells in object-oriented languages are morechange-prone. Munro [31] helps developers to identify the characteristics ofa bad smell in Java source code through the use of a set of software metricsand Simon et al [32] show that a special kind of metrics can support thedecision of where to apply refactoring in the source code. Sjoberg et al [33]conduct a study to identify specific types of smells in Java that have a higherimpact on code maintenance effort. Moha et al [29] describe and validatesmell detection techniques for four types of design smells. Marinescu [30]presents a detection strategy by formulating metric-based rules that capturedeviations from good object-oriented design principles.In the web domain, Nguyen et al [28] discuss different types of embeddedcode smells in dynamic web applications, particularly focusing on server-sidegenerated code and propose a tool to detect them. Milani Fard and Mesbah[23] propose a technique for detecting JavaScript code smells.7.2 Smells in CSS CodeKeller and Nussbaumer [7] have defined a metric for CSS code quality. Thismetric is defined based on the level of code abstractness and is limited to theconcept of selector scope. Mesbah and Mirshokraie [1] propose an automatedanalysis tool, called Cilla, to detect unused CSS code. Unused CSS code457.3. Predictive Modelspertains to code CSS rules that do not match any DOM elements as well asthose that match but are ineffective due to rule overriding. CSSNose buildsupon Cilla and extends it to detect CSS smells. Geneves et al [35] proposea technique based on tree logics which can be used in addition to existingruntime debuggers to ensure higher quality of CSS code. Mazinanian et al[6] define three types of duplication in CSS code and present a techniquefor discovering CSS refactoring opportunities to remove instances of thoseduplications.Our work is the first large empirical study on CSS in terms of types ofsmells and number of experimental objects. Instead of considering only onespecific type of smell, we have included 26 types of CSS smells in our study.In addition, our study is conducted on a set of 500 websites, which is thelargest study so far.7.3 Predictive ModelsA wide range of traditional techniques, such as regression modelling [38],neural networks [39], and case-based reasoning [40], have been used in soft-ware engineering data analysis literature to derive usable and reliable models[41]. Many are based on empirical data. These models represent an approx-imation of the true functional form relating the independent and dependentvariables on the basis of available input-output pairs [42]. Such modelsare capable of predicting a dependent variable, called the response variable,based on a set of independent variables used as predictors.Afzal et al [44] define a predictive model of fault count for identifyingsoftware reliability growth based on genetic programming. Suresh et al [45]use object-oriented metrics to propose a fault predictive model based onregression and neural network. Having a similar goal, Emam et al [46] useobject-oriented design metrics to predict faulty classes. Malhotra and Jain[47] use one statistical and six machine learning methods to predict modelsbased on object-oriented metrics. Binkley and Schach [48] use couplingdependency metric as an independent variable to predict the total numberof run-time failures and different maintenance measures in object-orientedlanguages and compare it with other metrics. Olague et al [49] empiricallyvalidate a set of three proposed object-oriented metrics to indicate their levelof effectiveness in predicting fault-proneness in software components.Our work is the first to propose and validate a predictive model for CSScode quality based on a large set of empirical data.46Chapter 8Conclusions and FutureWorkIn this thesis, we have conducted a large empirical study on CSS code of 500websites and answered research questions in terms of the pervasiveness andextent of different types of CSS code smells and their possible correlationswith different code metrics. Our results indicate that today’s CSS signif-icantly suffers from inappropriate patterns and is far from well-authoredcode. In addition, we have proposed the first CSS code quality model de-rived from a large learning sample. This model helps developers to get anestimation of the total number of code smells in their CSS code.Our work makes the following main contributions:• We propose a set of eight new CSS code smells, which, to the best ofour knowledge, are not detected by any other CSS maintenance tools;• We present an automated technique, called CSSNose, to detect andspot our proposed set of smells in the code and evaluate its effectivenessand accuracy;• We conduct a large-scale empirical study on 500 websites, 5060 files intotal which consist of more than 10 million lines of CSS code, consid-ering our proposed set in addition to 18 types of errors and warningsdetected by two well-known CSS validation tools, CSS Lint and W3CCSS Validator to find the most prevalent CSS inappropriate patternsand their extent in today’s websites;• We investigate correlations between CSS code metrics and the totalnumber of CSS smell types and instances;• We propose a predictive model based on the findings of our large em-pirical study which is capable of predicting the total number of CSSin any given website;47Chapter 8. Conclusions and Future WorkAs part of future work, we intend to investigate refactoring opportunitiesfor the types of smells proposed in this paper and apply those that arepresentation-preserving. In addition, we would like to enrich the evaluationof our predictive model by enlarging the test sample or using other possiblemodel evaluation techniques and apply required enhancements.48Bibliography[1] A. Mesbah and S. Mirshokraie, “Automated analysis of CSS rules tosupport style maintenance,” in Proceedings of the ACM/IEEE Interna-tional Conference on Software Engineering (ICSE), pp. 408–418, IEEEComputer Society, 2012.[2] W3Techs, “Usage of CSS for websites,” 2014. http://w3techs.com/technologies/details/ce-css/all/all.[3] G. J. Badros, A. Borning, K. Marriot, and P. Stuckey, “Constraintcascading style sheets for the web,” in Proceedings of the 12th annualACM symposium on User interface software and technology (UIST),pp. 73–82, ACM, 1999.[4] V. Quint and I. Vatton, “Editing with style,” in Proceedings of the2007 ACM symposium on Document engineering (DocEng), pp. 151–160, ACM, 2007.[5] H. W. Lie, Cascading Style Sheets. PhD thesis, Faculty of Mathematicsand Natural Sciences, University of Oslo, 2005.[6] D. Mazinanian, N. Tsantalis, and A. Mesbah, “Discovering refactoringopportunities in cascading style sheets,” in Proceedings of the ACMSIGSOFT International Symposium on the Foundations of SoftwareEngineering (FSE), p. 11 pages, ACM, 2014.[7] M. Keller and M. Nussbaumer, “CSS code quality: a metric for ab-stractness; or why humans beat machines in CSS coding,” in Proceed-ings of the 2010 Seventh International Conference on the Quality ofInformation and Communications Technology (QUATIC), pp. 116–121,IEEE Computer Society, 2010.[8] P. Meananeatra, S. Rongviriyapanish, and T. Apiwattanapong, “Us-ing software metrics to select refactoring for long method bad smell,”49Bibliographyin Proceedings of the 8th International Conference on Electrical Engi-neering/Electronics, Computer, Telecommunications and InformationTechnology (ECTICON), pp. 492–495, IEEE Computer Society, 2011.[9] P. Meananeatra, “Identifying refactoring sequences for improving soft-ware maintainability,” in Proceedings of the 27th IEEE/ACM Interna-tional Conference on Automated Software Engineering (ASE), pp. 406–409, ACM, 2012.[10] A. Mesbah, A. van Deursen, and S. Lenselink, “Crawling Ajax-basedweb applications through dynamic analysis of user interface statechanges,” ACM Transactions on the Web (TWEB), vol. 6, no. 1,pp. 3:1–3:30, 2012.[11] B. He, M. Patel, Z. Zhang, and K. Chang, “Accessing the deep web,”in Communications of the ACM - ACM at sixty: a look back in time,pp. 94–101, ACM, 2007.[12] Z. Behfarshad and A. Mesbah, “Hidden-web induced by client-sidescripting: An empirical study,” in Proceedings of the International Con-ference on Web Engineering (ICWE), pp. 52–67, Springer, 2013.[13] S. H. Kan, Metrics and models in software quality engineering. Addison-Wesley Longman Publishing Co., 1994.[14] D. J. Rumsey, Statistics For Dummies, 2nd Edition. For Dummies,2011.[15] T. M. Khoshgoftaar and N. Seliya, “Fault prediction modeling for soft-ware quality estimation: Comparing commonly used techniques,” Em-pirical Software Engineering, vol. 8, pp. 255–283, 2003.[16] P. Bloomfield and W. L. Steiger, Least Absolute Deviations: THEORY,APPLICATIONS And Algorithms (Progress in Probability). BirkhuserBoston; 1 edition, 1984.[17] P. Oman and J. Hagemeister, “Metrics for assessing software systemmaintainability,” in Software Maintenance, 1992. Proceerdings., Con-ference on, pp. 337–344, IEEE, 1992.[18] G. D. Garson, General Linear Models: Multivariate, Manova, & Man-cova. Statistical Associates Publishers; 2012 edition, 2012.50Bibliography[19] Y. Dodge, The Oxford Dictionary of Statistical Terms. Oxford Univer-sity Press; 1 edition, 2006.[20] X. R. Li and Z. Zhao, “Relative error measures for evaluation of es-timation algorithms,” in Information Fusion, 2005 8th InternationalConference on, vol. 1, pp. 8 pp.–, IEEE, 2005.[21] R. J. Hyndman and A. B. Koehler, “Another look at measures of fore-cast accuracy,” International Journal of Forecasting, vol. 22, pp. 679–688, 2006.[22] P. Juszczak, D. M. J. Tax, and R. P. W. Duin, “Feature scaling insupport vector data description,” 2002.[23] A. Milani Fard and A. Mesbah, “JSNOSE: Detecting javascript codesmells,” in Proceedings of the International Conference on Source CodeAnalysis and Manipulation (SCAM), pp. 116–125, IEEE Computer So-ciety, 2013.[24] E. Murphy-Hill and A. P. Black, “Seven habits of a highly effectivesmell detector,” in Proceedings of the 2008 international workshop onRecommendation systems for software engineering (RSSE), pp. 36–40,ACM, 2008.[25] A. Hamid, M. Ilyas, M. Hummayun, and A. Nawaz, “A comparativestudy on code smell detection tools,” International Journal of AdvancedScience and Technology, vol. 60, pp. 25–32, 2013.[26] M. Fowler, K. Beck, J. Brant, W. Opdyke, and D. Roberts, Refactoring:Improving the Design of Existing Code. Addison-Wesley Professional;1 edition, 1999.[27] F. Khomh, M. D. Penta, and Y. Gueheneuc, “An exploratory study ofthe impact of code smells on software change-proneness,” in Proceed-ings of the 16th Working Conference on Reverse Engineering (WCRE),pp. 75–84, IEEE, 2009.[28] H. V. Nguyen, H. A. Nguyen, T. T. Nguyen, A. T. Nguyen, and T. N.Nguyen, “Detection of embedded code smells in dynamic web applica-tions,” in Proceedings of the 27th IEEE/ACM International Conferenceon Automated Software Engineering (ASE), pp. 282–285, ACM, 2012.51Bibliography[29] N. Moha, Y. Gueheneuc, L. Duchien, and A. L. Meur, “Decor: Amethod for the specification and detection of code and design smells,”Software Engineering, IEEE Transactions on, vol. 36, pp. 20–36, 2010.[30] R. Marinescu, “Detection strategies: metrics-based rules for detectingdesign flaws,” in Proceedings of the 20th IEEE International Conferenceon Software Maintenance, pp. 350–359, IEEE, 2004.[31] M. J. Munro, “Product metrics for automatic identification of “BadSmell” design problems in java source-code,” in Proceedings of the 11thIEEE International Symposium on Software Metrics, pp. 15–15, IEEE,2005.[32] F. Simon, F. Steinbruckner, and C. Lewerentz, “Metrics based refac-toring,” in Proceedings of the Fifth European Conference on SoftwareMaintenance and Reengineering, pp. 30–38, IEEE, 2001.[33] D. I. Sjoberg, A. Yamashita, B. C. Anda, A. Mockus, and T. Dyba,“Quantifying the effect of code smells on maintenance effort,” SoftwareEngineering, IEEE Transactions on, vol. 39, pp. 1144–1156, 2013.[34] P. M. Marden and E. V. Munson, “Today’s style sheet standards: Thegreat vision blinded,” Computer, vol. 32, pp. 123–125, 1999.[35] P. Geneves, N. Layaida, and V. Quint, “On the analysis of cascadingstyle sheets,” in Proceedings of the 21st international conference onWorld Wide Web (WWW), pp. 809–818, ACM, 2012.[36] L. Briand and J. Wst, “Empirical studies of quality models in object-oriented systems,” in Advances in Computers, pp. 97–166, AcademicPress, 2002.[37] G. Box, J. Hunter, and W. Hunter, Statistics for experimenters: Design,Innovation, and Discovery. Wiley-Interscience; 2 edition, 2005.[38] M. L. Berenson, Intermediate statistical methods and applications: Acomputer package approach. Prentice Hall College Div; First Editionedition, 1982.[39] L. V. Fausett, Fundamentals of neural networks: Architectures, algo-rithms and applications. Pearson; 1 edition, 1993.[40] J. Kolodner, Case-based reasoning. Morgan Kaufmann, 1993.52[41] A. R. Gray and S. G. MacDonell, “A comparison of techniques for devel-oping predictive models of software metrics,” Information and softwaretechnology, vol. 39, pp. 425–437, 1997.[42] M. Shin and A. L. Goel, “Empirical data modeling in software en-gineering using radial basis functions,” Software Engineering, IEEETransactions on, vol. 26, no. 6, pp. 567–576, 2000.[43] Y. Luo, “Statistical defect prediction models for software quality assur-ance,” Master’s thesis, The concordia institute for information systemsengineering, July 2007.[44] W. Afzal, R. Torkar, and R. Feldt, “Prediction of fault count data usinggenetic programming,” in Multitopic Conference, 2008. INMIC 2008.IEEE International, pp. 349–356, IEEE, 2008.[45] Y. Suresh, L. Kumar, and S. K. Rath, “Statistical and machine learningmethods for software fault prediction using ck metric suite: A compar-ative analysis,” Hindawi Publishing Corporation ISRN Sofware Engi-neering, vol. 2014, p. 15 pages, 2014.[46] K. E. Emam, W. Melo, and J. C. Machado, “The prediction of faultyclasses using object-oriented design metrics,” Journal of systems andsoftware, vol. 56, pp. 63–75, 2001.[47] R. Malhotra and A. Jain, “Fault prediction using statistical and ma-chine learning methods for improving software quality,” Journal of In-formation Processing Systems, vol. 8, pp. 241–262, 2012.[48] A. Binkley and S. Schach, “Validation of the coupling dependency met-ric as a predictor of run-time failures and maintenance measures,” inProceedings of the 20th international conference on Software engineer-ing (ICSE), pp. 452–455, IEEE, 1998.[49] H. Olague, L. Etzkorn, S. Gholston, and S. Quattlebaum, “Empiricalvalidation of three software metrics suites to predict fault-proneness ofobject-oriented classes developed using highly iterative or agile softwaredevelopment processes,” Software Engineering, IEEE Transactions on,vol. 33, pp. 402–419, 2007.53Appendix ACSS Code Smells Detectedby CSS Lint and W3C CSSValidator Included in OurEmpirical StudyA.1 Smells Reported by CSS LintCSS Lint is an open source CSS code quality tool which flags patterns thatmight be considered as errors or warnings and cause problems for developersby performing a static analysis of CSS code. This tool lists some rules thatare used in order to report CSS code which is against these standard rules.In this section, we fully describe 16 types of these errors and warningsincluded in our empirical study to enrich our CSS code quality investigationin terms of smell diversity.A.1.1 Empty Catch RulesAs suggested by the name, these rules have no defined properties for theirselectors. They increase size of the CSS file without applying any style tothe web page.A.1.2 !importantAs discussed in chapter 2, CSS language provides a feature for developers tobe able to give a higher priority to a desired property regardless of the loca-tion or specificity value by adding !important to its value. Using this featurespecially in a high number of properties reveals that developers had troublewriting robust and effective CSS code and had to take reactive actions.54A.1. Smells Reported by CSS LintA.1.3 @importThese rules, shown in Figure A.1, are used to refer to CSS files within otherCSS files. They disallow the possibility of parallel CSS downloads becausewhile parsing the code, browser stops at each @import rule to download thespecified file and does not continue to the next styling rules until the down-load has finished. Hence, using link tags is a better option for includingstyle sheets which does not prevent from parallel downloading and can beconsidered as a refactoring opportunity for this type of smell.1 /* smelly code: */2 @import url(’ex11.css’);34 /* refactored code: */56 <link href="ex11.css" rel="7 stylesheet" type=’text/css’>Figure A.1: Using @import and its refactoringA.1.4 IDs in SelectorsIDs decrease reusability of the CSS code due to their uniqueness. IDs canbe used only once in a page and using them in selectors limits styling to asingle element and disallows using benefits given by CSS. An ID is 255 timesmore specific than one class which means 256 chained classes are needed tooverride one ID.4 Using more than one ID in one selector part shows even amore severe problem and lack of CSS development knowledge.A.1.5 Unqualified Attribute SelectorsThese selectors match all elements first and then check their attributes.This leads to low performance and increases workload. Similar to universalselectors which are noted with * and select all elements of the document13,unqualified attribute selectors are too general to be used in the process ofwriting good CSS code. The following code gives two examples of this typeof smells. Since browsers start evaluating selectors from right-to-left, firstall the elements which match the attribute and its value inside the brackets13 http://www.w3.org/TR/CSS2/selector.html55A.1. Smells Reported by CSS Lintare selected. Then an extra effort is required to choose only those elementswith the ancestor attribute which is a class in our examples.1 .selected [type=text] {2 color : red;3 }4 .newtab [target=_blank] {5 background- color : blue;6 }Figure A.2: Unqualified Attribute SelectorsA.1.6 Qualified HeadingsThese are heading elements h1 to h6 which are preceded by one or more otherselector types. These heading elements should be defined as not scoped toa particular area in order to increase visual consistency and performanceand also make maintenance easier. The heading elements which are notpreceded by any other selector type allow CSS code to be reused and makethe appearance of headings consistent in the entire web site. In addition,headings are built-in objects in object-oriented CSS (OOCSS)14 which serveas blocks and facilitate reusing some parts of the code. Hence, they shouldpreferably be defined as the only type in the selector part.1 /* smelly code: qualified heading: */2 .selected h1 {3 color : red;4 }56 /* refactored code: */7 h1 {8 color : red;9 }Figure A.3: Qualified Heading14 http://www.oocss.org56A.1. Smells Reported by CSS LintA.1.7 Already Defined HeadingsThese are heading elements h1 to h6 which have been used more than oncein the CSS code. Similar to qualified headings, defining these elements asselectors with different style declaration parts disables reusing them as built-in blocks in other parts of the code. They might also cause overridden styledeclarations.A.1.8 Units for Zero ValuesZero values are recognized by browser both with and without units. Hence,units such as ‘px’ for zero values are redundant and removing them helps insaving bytes.A.1.9 Box Model SizeUsing height/width properties in conjunction with padding and border mightcause misunderstanding and contradiction between developer’s intention andactual behavior of the CSS code. The following code helps in understandingthis type of smell.1 /* smelly code: box model size: */2 .selected {3 height: 200px;4 border: 2px solid blue;5 padding: 10px;6 }78 /* refactored code: */9 .selected {10 box-sizing: border-box;11 height: 200px;12 border: 2px solid blue;13 padding: 10px;14 }Figure A.4: Box model size and its refactoringAs we can see, the value for the height property is equal to 200px whilethe actual height of the element is 224px considering both padding andborder values. This might be confusing specially for a new developer sinceshe might forget about adding border and padding values to the explicit57A.1. Smells Reported by CSS Lintvalue of the height and considers 200px as the final height value whichmight affect other elements in the document adversely. In order to preventfrom this problem, adding box-sizing property might be helpful. In therefactored code of Figure A.4, the browser is enforced to accept 200px asthe actual value of the height property while keeping border and paddinginside the 200px area leaving 176px for content.A.1.10 Not Using Shorthand PropertiesThis type of smell ignores the feature provided by CSS language which isthe ability to replace a set of properties with one single property to avoidredundant code. Properties which are not shorthand increase file size anddecrease readability of the code. We can see an example in the followingcode:1 /* smelly code: not using shorthand properties: */2 .selected {3 background-color: rgb(255,0 ,255);4 background-image: url(images/example.gif);5 background-repeat: no-repeat;6 background-position: top left;7 }89 /* refactored code: */10 .selected {11 background: rgb(255,0 ,255) url(images/example.gif)12 no-repeat top left;13 }Figure A.5: Not using shorthand properties and its refactoringList of shorthand properties is available online.15A.1.11 Duplicate PropertiesThis type of smells includes the same properties with the same values andthe same properties with different values which are being separated by atleast one other property in the style declaration block. Figure A.6 depictsthis type of duplication reported by CSS Lint.15 https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties58A.1. Smells Reported by CSS Lint1 .firstexample {2 color: red;3 word-spacing: normal;4 color: red;5 }6 .secondexample {7 color: red;8 font-size: small;9 color: green;10 }11 .thirdexample {12 color: red;13 font-family: "Times New Roman";14 color: #FF0000;15 }Figure A.6: Duplicate PropertiesCSS duplication in Figure A.7 is ignored by CSS Lint and consequently inour study since it is so common to use different values for equal consecutiveproperties intentionally to deal with varying levels of browser support forCSS.1 .selected {2 color: red;3 color: #FF0000;4 }Figure A.7: Correct CSS: Not considered as duplicateA.1.12 Unknown PropertiesProperty names with typos are placed in this category.A.1.13 Negative text-indentSometimes it is required to replace a text element with an image. Forinstance, in order to show a logo on top of a page, h1 tag can have theproperties shown in Figure A.8.59A.1. Smells Reported by CSS Lint1 <style >2 h1 {3 background-image: url(’logo.gif’);4 text-indent: -9999 px;5 }6 </style >7 <h1> This heading is hidden! </h1 >Figure A.8: Using Negative text-indentSince h1 is a text element, the developer needs to add some text insideh1 tag in the HTML document in order to be able to access the h1 element.Then the text needs to be replaced with the logo image, so that it will bevisible to only screen readers and not to sighted users.Negative text-intent is used for this purpose. A large negative numbersuch as -999 or -9999 is set as the value of the text-indent property to hidethe text and show the image instead. However, using a large number suchas -9999, a giant 9999px offscreen box needs to be drawn by the browserwhich is a significant workload and decreases performance.16 In order toavoid this workload, we can apply the refactoring in Figure A.9.171 <style >2 h1 {3 background-image: url(’logo.gif’);4 text-indent: 100%;5 white-space: nowrap;6 overflow: hidden;7 }8 </style >9 <h1> This heading is hidden! </h1 >Figure A.9: Correct CSS: Not using negative text-indentBy this refactoring, text inside the h1 tag is indented beyond the widthof its container without wrapping and the overflowing content is hidden.Hence, it has prevented from the workload of drawing a 9999px box byadding just two more lines of CSS code.Negative text-indents might also cause too long horizontal scrollbars16 http://www.sitepoint.com/new-css-image-replacement-technique/17 http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/60A.2. Smells Reported by W3C CSS Validatorin right-to-left language pages. In order to avoid this long scrollbar, thedirection: ltr; property can be added to the rule as a refactoring toset the text direction left-to-right. CSS Lint and consequently our studyconsiders only those negative text-indent properties as smells which havenot applied this refactoring.A.1.14 Underscore HackIt is a technique to apply CSS to Internet Explorer prior to version 7 byadding an underscore ( ) before the property name. These browsers are notpopular these days.18. Hence, this technique is outdated and is also ignoredby other popular and modern browsers such as Chrome and Firefox.A.1.15 Too Many Web FontsDespite the fact that web fonts have become popular to enable cross browsercompatibility by declaring multiple font types in addition to the standardsystem fonts19 20, there is a disadvantage in using them. The referred fontfiles by @font-face can be quite large and some browsers might block ren-dering while downloading them. Hence, using more than five web fonts inone style sheet is considered as a smell in CSS Lint and in our study.A.1.16 Too Many font-sizeUsing too many font-size properties is a sign of poor CSS code withlow reusability. Defining a separate font-size value for each element isa time-consuming task which can be mitigated by defining some standardfont-size classes as reusable blocks and adding them to the HTML docu-ment as shown in Figure A.10.A style sheet with 10 or more font-size properties in returned as asmell by CSS Lint.A.2 Smells Reported by W3C CSS ValidatorW3C CSS Validator is another well-known CSS code quality tool whichcompares CSS code to the standard CSS grammar and reports errors andwarnings. In our study, we take advantage of the syntax analysis of the18 https://www.modern.ie/en-us/ie6countdown19 http://www.websitemagazine.com/content/blogs/posts/archive/2013/09/12/10-popular-google-web-fonts.aspx20 http://www.typeandgrids.com/blog/the-ten-most-popular-web-fonts-of-201361A.2. Smells Reported by W3C CSS Validator1 .small {2 font-size: 8px;3 }4 .medium {5 font-size: 11px;6 }7 .large {8 font-size: 14px;9 }Figure A.10: Correct CSS: Defining classes for different font-size valuessource code performed by W3C CSS Validator to consider two types ofvalidation errors in web applications.A.2.1 Parse ErrorThese parsing errors can be caused by a wide range of syntactical issuesin lines of CSS code such as missing braces, space between the ID prefix‘#’ and ID name and space between class prefix ‘.’ and class name in theselector part of a rule.A.2.2 Value ErrorThis type of error happens when the value of a property is not recognized bythe browser. This might be due to a typo in the value name, space betweenvalue and its unit or using a wrong number of values for a property.62Appendix BDiagrams for Distribution ofSmell Instances of DifferentTypes0200400600Box Model Size Already Defined Headings Qualified Headingsl l lBox Model Size Already DefinedBox ModelSize Already DefinedHeadings   QualifiedHeadings Headings0200400600   0246Bo odel Size    Alrea  DefinedHeadings Qualified HeadingsQualified Hea ingsFigure B.1: Distribution of the total number of box model size, alreadydefined headings and qualified headings smell instances in our 500 experi-mental objects63Appendix B. Diagrams for Distribution of Smell Instances of Different Types020406080100Duplicate Properties Too General Selectors Negative text−indentl l l020406080100Duplicate Properties   Too GeneralSelectors Negative text-indentFigure B.2: Distribution of the total number of duplicate properties, toogeneral selectors and negative text-indent smell instances in our 500 exper-imental objects01020304050@import Too Many font−size Lack of Shorthand Properties Unknown Propertiesl l l l01020304050@import     Too Manyfont-size Lack of ShorthandProperties UnknownPropertiesPropertiesFigure B.3: Distribution of the total number of @import, too many font-size, lack of shorthand properties and unknown properties smell instancesin our 500 experimental objects64Appendix B. Diagrams for Distribution of Smell Instances of Different Types050010001500!important Too Long Rules Parse Error Too Specific I Units for Zero Valuesl l l l l05001001500 !important Too Long Rules Parse Error Too MuchCascading Units forZero ValuesZero ValuesFigure B.4: Distribution of the total number of !important, too long rules,parse error, too much cascading and units for zero values smell instances inour 500 experimental objects050010001500200025003000Inappropriate Adjoining Pattern Too Specific II Undoing Stylel ll050010001500200025003000Erroneous Adjoining       Patterns High Specificity  ValuesFigure B.5: Distribution of the total number of erroneous adjoining patternsand high specificity values smell instances in our 500 experimental objects65Appendix B. Diagrams for Distribution of Smell Instances of Different Types0.0 0.5 1.0 1.5 2.0 2.5 3.0Too Many Web FontslMean= 0.1 0                  0.5                1.0                1.5                 2.0                2.5                3.0Mea  0.1Figure B.6: Distribution of the total number of too many web fonts smellinstances in our 500 experimental objects66Appendix CList of 500 Websites in OurEmpirical StudyC.1 Alexa’s 350 Top Websites1) http://www.google.com2) http://www.facebook.com3) http://www.youtube.com4) http://www.yahoo.com5) http://www.baidu.com6) http://www.wikipedia.org7) http://www.qq.com8) http://www.taobao.com9) http://www.live.com10) http://www.linkedin.com11) http://www.amazon.com12) http://www.hao123.com13) http://www.sberbank.ru14) http://www.weibo.com15) http://www.wordpress.com16) http://www.yandex.ru17) http://www.360.cn18) http://www.bing.com19) http://www.tmall.com20) http://www.vk.com21) http://www.ebay.com22) http://www.sohu.com23) http://www.pinterest.com24) http://www.163.com25) http://www.ask.com26) http://www.soso.com27) http://www.msn.com67C.1. Alexa’s 350 Top Websites28) http://www.tumblr.com29) http://www.mail.ru30) http://www.microsoft.com31) http://www.xvideos.com32) http://www.paypal.com33) http://www.imdb.com34) http://www.apple.com35) http://www.xinhuanet.com36) http://www.craigslist.org37) http://www.imgur.com38) http://www.xhamster.com39) http://www.clixsense.com40) http://www.123rf.com41) http://www.bbc.co.uk42) http://www.adcash.com43) http://www.blogger.com44) http://www.fc2.com45) http://www.reddit.com46) http://www.cnn.com47) http://www.pcgames.com.cn48) http://www.vube.com49) http://www.go.com50) http://www.adobe.com51) http://www.odnoklassniki.ru52) http://www.alipay.com53) http://www.conduit.com54) http://www.about.com55) http://www.newgrounds.com56) http://www.semrush.com57) http://www.corriere.it58) http://www.gmw.cn59) http://www.flickr.com60) http://www.aliexpress.com61) http://www.godaddy.com62) http://www.alibaba.com63) http://www.pornhub.com64) http://www.huffingtonpost.com65) http://www.lady8844.com66) http://www.netflix.com67) http://www.ku6.com68C.1. Alexa’s 350 Top Websites68) http://www.thepiratebay.se69) http://www.dailymotion.com70) http://www.weather.com71) http://www.vimeo.com72) http://www.dailymail.co.uk73) http://www.espn.go.com74) http://www.foxsports.com75) http://www.xnxx.com76) http://www.rakuten.co.jp77) http://www.indiatimes.com78) http://www.themeforest.net79) http://www.livejasmin.com80) http://www.aol.com81) http://www.uol.com.br82) http://www.redtube.com83) http://www.youporn.com84) http://www.dropbox.com85) http://www.nytimes.com86) http://www.slideshare.net87) http://www.globo.com88) http://www.adf.ly89) http://www.buzzfeed.com90) http://www.china.com91) http://www.directrev.com92) http://www.mozilla.org93) http://www.m2newmedia.com94) http://www.ameblo.jp95) http://www.fiverr.com96) http://www.booking.com97) http://www.livejournal.com98) http://www.deviantart.com99) http://www.yelp.com100) http://www.sogou.com101) http://www.flipkart.com102) http://www.hootsuite.com103) http://www.blogfa.com104) http://www.oracle.com105) http://www.etsy.com106) http://www.outbrain.com107) http://www.wikihow.com69C.1. Alexa’s 350 Top Websites108) http://www.avg.com109) http://www.clkmon.com110) http://www.stumbleupon.com111) http://www.soundcloud.com112) http://www.livedoor.com113) http://www.w3schools.com114) http://www.4shared.com115) http://www.badoo.com116) http://www.sourceforge.net117) http://www.mediafire.com118) http://www.torrentz.eu119) http://www.liveinternet.ru120) http://www.forbes.com121) http://www.bankofamerica.com122) http://www.addthis.com123) http://www.aweber.com124) http://www.foxnews.com125) http://www.answers.com126) http://www.indeed.com127) http://www.bet365.com128) http://www.gameforge.com129) http://www.salesforce.com130) http://www.hostgator.com131) http://www.naver.com132) http://www.espncricinfo.com133) http://www.skype.com134) http://www.github.com135) http://www.softonic.com136) http://www.statcounter.com137) http://www.reference.com138) http://www.spiegel.de139) http://www.nicovideo.jp140) http://www.shutterstock.com141) http://www.allegro.pl142) http://www.walmart.com143) http://www.sharelive.net144) http://www.mailchimp.com145) http://www.tube8.com146) http://www.gamer.com.tw147) http://www.so.com70C.1. Alexa’s 350 Top Websites148) http://www.wix.com149) http://www.zillow.com150) http://www.wsj.com151) http://www.popads.net152) http://www.wellsfargo.com153) http://www.goo.ne.jp154) http://www.wordreference.com155) http://www.photobucket.com156) http://www.bild.de157) http://www.pandora.com158) http://www.warriorforum.com159) http://www.pcpop.com160) http://www.zedo.com161) http://www.weebly.com162) http://www.taringa.net163) http://www.rutracker.org164) http://www.php.net165) http://www.ups.com166) http://www.leboncoin.fr167) http://www.mashable.com168) http://www.goodreads.com169) http://www.businessinsider.com170) http://www.quikr.com171) http://www.ucoz.ru172) http://www.rediff.com173) http://www.rambler.ru174) http://www.gmx.net175) http://www.telegraph.co.uk176) http://www.domaintools.com177) http://www.kaskus.co.id178) http://www.comcast.net179) http://www.ettoday.net180) http://www.thefreedictionary.com181) http://www.tianya.cn182) http://www.wp.pl183) http://www.avito.ru184) http://www.ikea.com185) http://www.goal.com186) http://www.ndtv.com187) http://www.uploaded.net71C.1. Alexa’s 350 Top Websites188) http://www.lpcloudsvr302.com189) http://www.xcar.com.cn190) http://www.baomihua.com191) http://www.usps.com192) http://www.pchome.net193) http://www.moz.com194) http://www.iqiyi.com195) http://www.coccoc.com196) http://www.thefreecamsecret.com197) http://www.codecanyon.net198) http://www.goodgamestudios.com199) http://www.huanqiu.com200) http://www.adrotator.se201) http://www.twitch.tv202) http://www.ci123.com203) http://www.fedex.com204) http://www.nbcnews.com205) http://www.onclickads.net206) http://www.it168.com207) http://www.web.de208) http://www.bitly.com209) http://www.ehow.com210) http://www.bitauto.com211) http://www.delta-search.com212) http://www.9gag.com213) http://www.enet.com.cn214) http://www.hp.com215) http://www.daum.net216) http://www.samsung.com217) http://www.suning.com218) http://www.myntra.com219) http://www.varzesh3.com220) http://www.sochi2014.com221) http://www.scribd.com222) http://www.olx.in223) http://www.snapdeal.com224) http://www.xuite.net225) http://www.tmz.com226) http://www.meetup.com227) http://www.extratorrent.cc72C.1. Alexa’s 350 Top Websites228) http://www.java.com229) http://www.doublepimp.com230) http://www.4dsply.com231) http://www.orange.fr232) http://www.mercadolivre.com.br233) http://www.infusionsoft.com234) http://www.constantcontact.com235) http://www.eazel.com236) http://www.hulu.com237) http://www.reuters.com238) http://www.nih.gov239) http://www.chinaz.com240) http://www.xywy.com241) http://www.rapidgator.net242) http://www.detik.com243) http://www.speedtest.net244) http://www.libero.it245) http://www.mobile01.com246) http://www.clickbank.com247) http://www.chaturbate.com248) http://www.microsoftonline.com249) http://www.bluehost.com250) http://www.gsmarena.com251) http://www.kooora.com252) http://www.webmd.com253) http://www.youjizz.com254) http://www.histats.com255) http://www.motherless.com256) http://www.caijing.com.cn257) http://www.in.com258) http://www.xing.com259) http://www.bestbuy.com260) http://www.adnxs.com261) http://www.americanexpress.com262) http://www.cj.com263) http://www.ad6media.fr264) http://www.zippyshare.com265) http://www.mywebsearch.com266) http://www.nba.com267) http://www.elpais.com73C.1. Alexa’s 350 Top Websites268) http://www.timeanddate.com269) http://www.ign.com270) http://www.hardsextube.com271) http://www.techcrunch.com272) http://www.zendesk.com273) http://www.tinyurl.com274) http://www.hdfcbank.com275) http://www.snapdo.com276) http://www.getresponse.com277) http://www.lenta.ru278) http://www.tagged.com279) http://www.pof.com280) http://www.force.com281) http://www.cnzz.com282) http://www.rt.com283) http://www.irs.gov284) http://www.douban.com285) http://www.groupon.com286) http://www.repubblica.it287) http://www.siteadvisor.com288) http://www.zimbio.com289) http://www.seznam.cz290) http://www.ero-advertising.com291) http://www.w3.org292) http://www.kakaku.com293) http://www.elmundo.es294) http://www.list-manage.com295) http://www.xe.com296) http://www.feedly.com297) http://www.dell.com298) http://www.ameba.jp299) http://www.nydailynews.com300) http://www.yaolan.com301) http://www.lg.com.br302) http://www.jrj.com.cn303) http://www.upworthy.com304) http://www.target.com305) http://www.odesk.com306) http://www.doorblog.jp307) http://www.okcupid.com74C.1. Alexa’s 350 Top Websites308) http://www.ce.cn309) http://www.zing.vn310) http://www.habrahabr.ru311) http://www.joomla.org312) http://www.life.com.tw313) http://www.surveymonkey.com314) http://www.doubleclick.com315) http://www.rbc.ru316) http://www.naukri.com317) http://www.jimdo.com318) http://www.istockphoto.com319) http://www.fbcdn.net320) http://www.freelancer.com321) http://www.blackhatworld.com322) http://www.lenovo.com323) http://www.flipora.com324) http://www.webmoney.ru325) http://www.justdial.com326) http://www.gazeta.pl327) http://www.latimes.com328) http://www.jd.com329) http://www.mama.cn330) http://www.retailmenot.com331) http://www.abcnews.go.com332) http://www.4399.com333) http://www.match.com334) http://www.quora.com335) http://www.informer.com336) http://www.att.com337) http://www.mysearchdial.com338) http://www.sahibinden.com339) http://www.ck101.com340) http://www.ixxx.com341) http://www.probux.com342) http://www.capitalone.com343) http://www.elance.com344) http://www.icicibank.com345) http://www.qtrax.com346) http://www.issuu.com347) http://www.twoo.com75C.2. 150 Websites Collected Randomly348) http://www.ig.com.br349) http://www.teensdigest.com350) http://www.pch.comC.2 150 Websites Collected Randomly1) http://www.dvdmaniacs.net2) http://www.whitestuff.com3) http://www.thespot.nu4) http://www.javascriptkit.com5) http://www.angelfire.com6) http://www.megnut.com7) http://www.kickerclub.com8) http://www.bandwidthplace.com9) http://www.pensacolaswing.com10) http://www.onlamp.com11) http://www.subscene.com12) http://www.jabong.com13) http://www.empowernetwork.com14) http://www.xgo.com.cn15) http://www.irctc.co.in16) http://www.jerseyjoeart.com17) http://www.worldwatch.org18) http://www.g4tv.com19) http://www.filmthreat.com20) http://www.jerwoodspace.co.uk21) http://www.shirky.com22) http://www.linklust.com23) http://www.slgtm.com24) http://www.freewarejava.com25) http://www.accidentprone.com26) http://www.onthebox.com27) http://www.inmotionmagazine.com28) http://www.dynamicdrive.com29) http://www.indeterminate.de30) http://www.oaklandmetro.org31) http://www.explodingdog.com32) http://www.gravityrec.com33) http://www.interfacelift.com76C.2. 150 Websites Collected Randomly34) http://www.plasticbag.org35) http://www.parentfurther.com/technology-media36) http://www.usdept-arttech.net37) http://www.shehaal.com38) http://www.moviemistakes.com39) http://www.babylon.com40) http://www.theyearofourlord.com41) http://www.filmpicker.com42) http://www.pterodactyl.info43) http://www.lanacion.com.ar44) http://www.writeslikeshetalks.com45) http://www.xt-concept.com46) http://www.coudal.com47) http://www.maplestory.com48) http://www.quiz1000.ca49) http://www.blogjam.com50) http://www.illruminations.com51) http://www.bern-1914.org52) http://www.earache.com53) http://www.karlo.org54) http://www.dublab.com55) http://www.chapters.indigo.ca/home56) http://www.satanslaundromat.com/sl57) http://www.aspcr.com58) http://www.regretless.com59) http://www.thecutlerycollection.com60) http://www.magicmarkerrecords.com61) http://www.letourmentvert.com62) http://www.paisleypop.com/store63) http://www.roleplaygateway.com64) http://www.crazyimages.com65) http://www.richbarnard.com66) http://www.48hourfilm.com67) http://www.hxc.com68) http://www.killingthebuddha.com69) http://www.congressproject.org70) http://www.michigan.gov71) http://www.dailyscript.com72) http://www.frank151.com73) http://www.accesshiphop.com77C.2. 150 Websites Collected Randomly74) http://www.thechaingang.com75) http://www.goldenbonbon.com76) http://www.prolific.org77) http://www.chronicle.com/section/Home/578) http://www.flawedlogic.co.uk79) http://www.zcommunications.org80) http://www.hawthornestreetrecords.com81) http://www.derstandard.at82) http://www.jongevos.nl83) http://www.mattmadden.com84) http://www.saintcorporation.com85) http://www.powerpage.org86) http://www.ire.org87) http://www.realstorygroup.com88) http://www.browsehappy.com89) http://www.notanalternative.com90) http://www.hiropon-factory.com91) http://www.overprint.com.ar92) http://www.crailtap.com93) http://www.filmus.is94) http://www.boston.indymedia.org95) http://www.hardcoremusic.com96) http://www.petdance.com97) http://www.eluniversal.com.mx98) http://www.reprodepot.com99) http://www.adbs.fr100) http://www.blackhat.com101) http://www.thefarrierguide.com102) http://www.narnackrecords.com103) http://www.readwrite.com104) http://www.katespade.com105) http://www.socialistvoice.org106) http://www.davidrovics.com107) http://www.verybusy.org108) http://www.houseoftomorrow.com109) http://www.the-business-blog.com110) http://www.girlhacker.com111) http://www.geektools.com112) http://www.killrockstars.com113) http://www.goateestyle.com78C.2. 150 Websites Collected Randomly114) http://www.equalexchange.coop115) http://www.dribbleglass.com116) http://www.kuro5hin.org117) http://www.aversionline.com118) http://www.supah.com119) http://www.42opus.com120) http://www.katielinendoll.com121) http://www.onfocus.com122) http://www.wockerjabby.com123) http://www.powerofcommunity.net124) http://www.hugedomains.com125) http://www.saigon.com126) http://www.slipups.com127) http://www.clubon.co.uk128) http://www.funnygarbage.com129) http://www.gordonandsmith.com130) http://www.recircle.net131) http://www.scul.org132) http://www.badacidtrip.com133) http://www.moddb.com134) http://www.culturama.org135) http://www.ac-et.com136) http://www.burntsienna.nu137) http://www.usounds.com138) http://www.victorianhalloween.com139) http://www.earthbrands.com140) http://www.mreggs.com141) http://www.fragdolls.com142) http://www.commercialalert.org143) http://www.consolidatedskateboard.com144) http://www.nathanbeach.com145) http://www.fortunecity.de146) http://www.theslot.com147) http://www.extrapepperoni.com148) http://www.pointoflife.com149) http://www.c3.hu150) http://www.deliriouscool.org79Appendix DList of 187 Websites inUnused Code Study1) http://www.wikipedia.org2) http://www.bing.com3) http://www.soso.com4) http://www.msn.com5) http://www.microsoft.com6) http://www.bbc.co.uk7) http://www.go.com8) http://www.about.com9) http://www.thepiratebay.se10) http://www.xnxx.com11) http://www.china.com12) http://www.directrev.com13) http://www.mozilla.org14) http://www.m2newmedia.com15) http://www.ameblo.jp16) http://www.sogou.com17) http://www.w3schools.com18) http://www.torrentz.eu19) http://www.indeed.com20) http://www.hostgator.com21) http://www.sharelive.net22) http://www.goo.ne.jp23) http://www.wordreference.com24) http://www.pandora.com25) http://www.php.net26) http://www.ups.com27) http://www.ettoday.net28) http://www.wp.pl29) http://www.ikea.com30) http://www.ndtv.com80Appendix D. List of 187 Websites in Unused Code Study31) http://www.lpcloudsvr302.com32) http://www.moz.com33) http://www.coccoc.com34) http://www.thefreecamsecret.com35) http://www.goodgamestudios.com36) http://www.huanqiu.com37) http://www.fedex.com38) http://www.nbcnews.com39) http://www.onclickads.net40) http://www.delta-search.com41) http://www.enet.com.cn42) http://www.varzesh3.com43) http://www.sochi2014.com44) http://www.java.com45) http://www.4dsply.com46) http://www.nih.gov47) http://www.gsmarena.com48) http://www.bestbuy.com49) http://www.mywebsearch.com50) http://www.techcrunch.com51) http://www.tinyurl.com52) http://www.snapdo.com53) http://www.lenta.ru54) http://www.rt.com55) http://www.irs.gov56) http://www.repubblica.it57) http://www.siteadvisor.com58) http://www.w3.org59) http://www.xe.com60) http://www.feedly.com61) http://www.upworthy.com62) http://www.doorblog.jp63) http://www.ce.cn64) http://www.habrahabr.ru65) http://www.joomla.org66) http://www.doubleclick.com67) http://www.rbc.ru68) http://www.flipora.com69) http://www.gazeta.pl70) http://www.latimes.com81Appendix D. List of 187 Websites in Unused Code Study71) http://www.informer.com72) http://www.mysearchdial.com73) http://www.ixxx.com74) http://www.qtrax.com75) http://www.dvdmaniacs.net76) http://www.javascriptkit.com77) http://www.megnut.com78) http://www.bandwidthplace.com79) http://www.pensacolaswing.com80) http://www.onlamp.com81) http://www.jerseyjoeart.com82) http://www.g4tv.com83) http://www.filmthreat.com84) http://www.jerwoodspace.co.uk85) http://www.shirky.com86) http://www.linklust.com87) http://www.slgtm.com88) http://www.freewarejava.com89) http://www.accidentprone.com90) http://www.onthebox.com91) http://www.inmotionmagazine.com92) http://www.dynamicdrive.com93) http://www.indeterminate.de94) http://www.oaklandmetro.org95) http://www.explodingdog.com96) http://www.gravityrec.com97) http://www.interfacelift.com98) http://www.plasticbag.org99) http://www.parentfurther.com/technology-media100) http://www.usdept-arttech.net101) http://www.shehaal.com102) http://www.theyearofourlord.com103) http://www.pterodactyl.info104) http://www.writeslikeshetalks.com105) http://www.xt-concept.com106) http://www.coudal.com107) http://www.maplestory.com108) http://www.quiz1000.ca109) http://www.blogjam.com110) http://www.illruminations.com82Appendix D. List of 187 Websites in Unused Code Study111) http://www.bern-1914.org112) http://www.earache.com113) http://www.karlo.org114) http://www.dublab.com115) http://www.satanslaundromat.com/sl116) http://www.aspcr.com117) http://www.regretless.com118) http://www.magicmarkerrecords.com119) http://www.letourmentvert.com120) http://www.paisleypop.com/store121) http://www.crazyimages.com122) http://www.richbarnard.com123) http://www.48hourfilm.com124) http://www.hxc.com125) http://www.killingthebuddha.com126) http://www.congressproject.org127) http://www.michigan.gov128) http://www.dailyscript.com129) http://www.frank151.com130) http://www.accesshiphop.com131) http://www.goldenbonbon.com132) http://www.prolific.org133) http://www.flawedlogic.co.uk134) http://www.hawthornestreetrecords.com135) http://www.derstandard.at136) http://www.jongevos.nl137) http://www.mattmadden.com138) http://www.powerpage.org139) http://www.realstorygroup.com140) http://www.browsehappy.com141) http://www.notanalternative.com142) http://www.hiropon-factory.com143) http://www.overprint.com.ar144) http://www.crailtap.com145) http://www.filmus.is146) http://www.hardcoremusic.com147) http://www.petdance.com148) http://www.eluniversal.com.mx149) http://www.reprodepot.com150) http://www.blackhat.com83Appendix D. List of 187 Websites in Unused Code Study151) http://www.readwrite.com152) http://www.socialistvoice.org153) http://www.davidrovics.com154) http://www.verybusy.org155) http://www.houseoftomorrow.com156) http://www.the-business-blog.com157) http://www.girlhacker.com158) http://www.geektools.com159) http://www.killrockstars.com160) http://www.goateestyle.com161) http://www.dribbleglass.com162) http://www.aversionline.com163) http://www.42opus.com164) http://www.katielinendoll.com165) http://www.onfocus.com166) http://www.wockerjabby.com167) http://www.powerofcommunity.net168) http://www.hugedomains.com169) http://www.saigon.com170) http://www.slipups.com171) http://www.clubon.co.uk172) http://www.funnygarbage.com173) http://www.gordonandsmith.com174) http://www.recircle.net175) http://www.badacidtrip.com176) http://www.usounds.com177) http://www.victorianhalloween.com178) http://www.fragdolls.com179) http://www.commercialalert.org180) http://www.consolidatedskateboard.com181) http://www.nathanbeach.com182) http://www.fortunecity.de183) http://www.theslot.com184) http://www.extrapepperoni.com185) http://www.pointoflife.com186) http://www.c3.hu187) http://www.deliriouscool.org84

Cite

Citation Scheme:

        

Citations by CSL (citeproc-js)

Usage Statistics

Share

Embed

Customize your widget with the following options, then copy and paste the code below into the HTML of your page to embed this item in your website.
                        
                            <div id="ubcOpenCollectionsWidgetDisplay">
                            <script id="ubcOpenCollectionsWidget"
                            src="{[{embed.src}]}"
                            data-item="{[{embed.item}]}"
                            data-collection="{[{embed.collection}]}"
                            data-metadata="{[{embed.showMetadata}]}"
                            data-width="{[{embed.width}]}"
                            async >
                            </script>
                            </div>
                        
                    
IIIF logo Our image viewer uses the IIIF 2.0 standard. To load this item in other compatible viewers, use this url:
http://iiif.library.ubc.ca/presentation/dsp.24.1-0167067/manifest

Comment

Related Items