forked from software-engineering-amsterdam/latex
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathch-discover.tex
100 lines (86 loc) · 5.2 KB
/
ch-discover.tex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
% !TEX root = thesis.tex
\chapter{Discovering Existing CSS Code Conventions}
\label{sec:discovering}
This chapter focuses on determining what CSS code conventions exist. The
Research Method section presents the approach used to discover existing CSS
conventions. The Results section contains a summary of the gathered
conventions.
\section{Research Method}
The primary organization responsible for the specification of CSS has not
published an official CSS style guide. As a result, the CSS community has
produced a pool of coding conventions, best practices, guidelines and
recommendations.
To discover existing CSS code conventions, two searches with the keywords
\texttt{CSS code conventions} were made using the search engines
duckduckgo\footnote{\url{http://duckduckgo.com}} and
google\footnote{\url{http://google.com}}. The first 100 results of each search
were analyzed. From each result only conventions that refer to plain CSS are
taken into account and conventions related to preprocessors are ignored. In
case the result contains links to other style guides, these references are
considered as results and analyzed separately.
While searching for conventions, a number of issues were discovered. First,
some of the conventions do not provide sufficient information to be applied in
practice. Such an example is the convention \textit{Do not use CSS hacks --- try
a different approach first} when the style guide does not define the meaning
of CSS hacks. Such overgeneralized conventions were omitted from the results.
Another part of the discovered conventions introduce a discrepancy between
their description in natural language and the provided code example. An
instance of such contradiction is when the convention \textit{Nothing but
declarations should be indented} is followed by a code snippet illustrating
that rules in media queries should also be indented. In such cases the
convention is interpreted as described by the code example.
When conventions are not supported with code examples, their description could
remain open for interpretation. For example, \textit{Rules with more than 4
selectors are not allowed} could be seen as forbidding multi-selectors with
more than four selectors, or disallowing selectors with more than four simple--selectors. All possible interpretations of ambiguous conventions were
registered as separate conventions.
There are conventions that are not explicitly stated, but could only be
inferred by the other rules. For example, the convention \textit{You can put
long values on multiple lines} states that a long value is allowed to appear
on several lines. However, this rule implies the presence of another
convention, that is not explicitly stated. It implies that short values should
appear on one line and only lengthy values are allowed to appear on multiple lines.
Such implicit conventions were registered as explicit conventions.
\section{Results}
As a result of the searches, 28 CSS style guides were discovered. Sources of
these conventions include CSS professionals, open-source communities and
companies, such as
\href{https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#Protocol}{Google},
\href{http://primercss.io/guidelines/#css}{GitHub},
\href{https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/}{Wordpress},
\href{https://www.drupal.org/node/1887862}{Drupal}. Most of the discovered CSS
convention sets are parts of bigger style guides and contain a
small number of conventions 5--10. Standalone CSS style guides contain from 10
to 42 conventions. The total number of conventions in the discovered style
guides is 471. However, style guides often share the same conventions and even
refer to one another. Because of this overlapping, only one third of the 471
conventions are unique.
Thus, the result of the searches is 155 unique code conventions appearing in
28 CSS style guides. Some of the most popular conventions are listed below:
\begin{itemize}
\item Put a ``;'' at the end of declarations.
\item Do not put quotes in URL declarations.
\item Use short hex values.
\item Use the shorthand margin property.
\item Do not use units after 0 values.
\item Use a leading zero for decimal values.
\item Avoid qualifying ID and class names with type selectors.
\item Use short hexadecimal values.
\item When possible, use em instead of pix.
\item Avoid using z-indexes when possible.
\item Require compatible vendor prefixes.
\item Do not use id selectors.
\item Id and class names should be lowercase.
\item All values except the contents of strings should be lowercase.
\item HTML tags should be lowercase.
\item Use single quotes in charsets.
\item Use single quotes in attribute selectors.
\item Put one space between the colon and the value of a declaration.
\item Put one space between the last selector and the block.
\item One selector per line.
\item Forbid empty rules.
\item A vendor-prefixed property must be followed by a standard property.
\item No trailing spaces.
\end{itemize}
The full list of all discovered conventions along with their sources and
explanation of their meaning is available in the CssCoco GitHub repository\footnote{\url{https://github.com/boryanagoncharenko/CssCoco/blob/master/analysis.md}}, expressed in the form discussed in the next chapter.