The goal of this is to steer HTML & CSS coders to create a built-in gut-level value system that self-monitors the standard to which they code.

1. How to Write Beautiful Code
Beautiful Code = Maintainable Code
©10/3/2015

2. STRIKE A BALANCE
How To
©10/3/2015

3. Clarity and Transparency
• Clarity is how easily a reader can deduce
what the code does.
• If code seems to do one thing but actually
does something else (or something more),
it's misleading.
• Transparent code does what it seems to
do.
©10/3/2015

4. FUN FACTOID
Jeff Dean writes directly in binary. He
then writes the source code as a
documentation for other developers.
©10/3/2015

5. Elegance
• There are many ways to write code that
works.
• However some ways are clumsy while
other ways are neat and graceful.
• Succinctness often adds elegance, but
excessive succinctness can reduce clarity.
• A code artist finds the balance.
©10/3/2015

6. Reducing Markup
Whenever possible,
avoid superfluous
parent elements when
writing HTML.
Many times this
requires iteration and
refactoring, but
produces less HTML.
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar"
src="...">
©10/3/2015

7. FUN FACTOID
Jeff Dean's IDE doesn't do code
analysis, it does code appreciation.
©10/3/2015

8. Efficiency
• Writing code beautifully avoids
unnecessary use of server resources and
reduces page load metrics.
• TTFB: Time to First Byte
• TTI: Time to Interact
• Efficiency = Better SEO and CRO
©10/3/2015

9. FUN FACTOID
Jeff Dean was forced to invent
asynchronous APIs one day when
he optimized a function so that it
returned before it was invoked.
©10/3/2015

10. Aesthetics
• Artful code is easy on the eyes.
• Create code style guides & policies
upfront.
• Use post processing tools, such as
CSSCOMB & JSLint.
• Code must be reviewed regularly for
compliance with policies.
©10/3/2015

11. FUN FACTOID
Jeff Dean acquired Sawzall readability after
writing 58 lines of Sawzall code. As part of
his readability review, he pointed out a flaw
in the style guide which was promptly
corrected by the reviewer.
©10/3/2015

12. PERFECTION VS BUDGET
Keeping YOUR Balance
©10/3/2015

13. It’s not a one step process.
• It’s art. Not perfection.
• Perfection = Blown Budget = Angry Client
= Bad Business
• Over time your code base ends up
cleaner, brighter and more beautiful.
©10/3/2015

14. WHO IS JEFF DEAN?
So…
©10/3/2015

15. Just the facts, ma’am!
• Google Senior Fellow who designed a lot
of Google's biggest projects including the
main search infrastructure.
• Jeff pumped out elegant code like a
champagne fountain at a wedding.
• Effortless code is not the norm.
©10/3/2015

16. BY DEFINITION
Coding
©10/3/2015

17. HTML Elements
The HTML element is everything from the
start tag to the end tag.
<p>My first HTML paragraph.</p>
UPDATE: In HTML5 some elements are
self-closing.
©10/3/2015

18. HTML Attributes
• HTML elements can have attributes.
• Attributes provide additional information
about an element.
• They are specified in the start tag.
• Attributes come in name/value pairs like:
name="value“
Examples: <a href= <img src= alt=
©10/3/2015

19. Boolean Attributes
• HTML and XHTML boolean attributes
should not be confused with boolean
values.
• The presence of a boolean attribute on an
element = the true value, and the absence
of the attribute = the false value.
<input type=“text” name=“example” disabled>
©10/3/2015

20. CSS Selectors
• CSS selectors allow you to select and
manipulate HTML elements.
• Are used to "find" (or select) HTML
elements based on their id, class, type,
attribute, and more.
h1, h2, p {
text-align: center;
color: red;
}
©10/3/2015

21. CSS Declarations
A CSS rule set consists of a selector and a
declaration block.
©10/3/2015

22. CSS Property Values
• Color
• Background and Borders
• Basic Box
• Flexible Box
• Text
• Text Decoration
• Fonts
• Writing Modes
• Table
• Lists and Counters
• Animation
• Transform
• Basic User Interface
• Multi-column
• Paged Media
• Generated Content
• Filter Effects
• Image/Replaced Content
• Masking
• Speech
• Marquee
©10/3/2015

23. CSS Color Parameters
Can be specified in the following ways:
• Hexadecimal colors
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
• Predefined/Cross-browser color names
©10/3/2015

24. BY THE GOLDEN RULE
Coding
©10/3/2015

25. ENFORCE THESE GUIDELINES
AT ALL TIMES.
Whether working together or alone…
©10/3/2015

26. The Beautiful Code
Cheat Sheet
©10/3/2015

27. Syntax
• Use soft tabs with two spaces—they're the
only way to guarantee code renders the
same in any environment.
• Nested elements should be indented once
(two spaces).
• Always use double quotes, never single
quotes, on attributes.
• Don't include a trailing slash in self-closing
elements.
• Don’t omit optional closing tags (e.g. </li> or
</body>).
©10/3/2015

28. Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
©10/3/2015

29. HTML5 doctype
Enforce standards mode & more consistent
rendering in every browser possible with this
simple doctype at the beginning of every HTML
page.
<!DOCTYPE html>
<html>
<head>
</head>
</html>
©10/3/2015

30. Language Attribute
Always include it. Why?
• It aids speech synthesis tools to determine
what pronunciations to use.
• It helps translation tools to determine what
rules to use.
<html lang="en-us">
©10/3/2015

31. IE Compatibility Mode
• Internet Explorer supports the use of a
document compatibility <meta> tag to
specify what version of IE the page should
be rendered as.
• Unless circumstances require otherwise,
it's most useful to instruct IE to use the
latest supported mode with edge mode.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
©10/3/2015

32. Character Encoding
• This isn’t just for internationals!!!
• Using it, quickly & easily ensures proper
rendering of your content.
• When doing so, you may avoid using
character entities in your HTML.
<head>
<meta charset="UTF-8">
</head>
©10/3/2015

33. CSS & JavaScript Includes
Default: text/css
<!-- External CSS -->
<link rel="stylesheet"
href=“website.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
Default: text/javascript
<!-- JavaScript -->
<script
src="website.js"></scrip
t>
©10/3/2015

34. Attribute Order
For readability, use
this order:
• class
• id, name
• data-*
• src, for, type, href,
value
• title, alt
• role, aria-*
<a class="..." id="..."
data-toggle="modal"
href="#"> Example link
</a>
<input class="form-
control" type="text">
<img src="..." alt="...">
©10/3/2015

35. The Beautiful Code
Cheat Sheet
©10/3/2015

36. CSS Syntax
Proper Indention
Use soft tabs with two
spaces—they're the
only way to guarantee
code renders the
same in any
environment.
<head>
<meta charset="UTF-8">
</head>
©10/3/2015

37. CSS Syntax
Selectors
When grouping
selectors, keep
individual
selectors to a
single line.
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
©10/3/2015

38. CSS Syntax
Declarations
Include one
space before
the opening
brace of
declaration
blocks for
legibility.
/* Bad CSS */
.selector{
padding: 15px;
margin-bottom: 15px; }
/* Good CSS */
.selector {
padding: 15px;
margin-bottom: 15px;
}
©10/3/2015

39. CSS Syntax
Declarations
Place closing
braces of
declaration
blocks on a new
line.
/* Bad CSS */
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px; }
/* Good CSS */
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
}
©10/3/2015

40. CSS Syntax
Declarations
Include one
space after :
for each
declaration.
/* Bad CSS */
box-shadow:0px 1px 2px #CCC,inset 0 1px 0
#FFFFFF
/* Good CSS */
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
©10/3/2015

41. CSS Syntax
Declarations
End all
declarations
with a semi-
colon, including
the last one.
/* Bad CSS */
box-shadow:0px 1px 2px #CCC,inset 0 1px 0
#FFFFFF
}
/* Good CSS */
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
©10/3/2015

42. CSS Syntax
Property and
Color Values
Comma-
separated
property values
should include
a space after
each comma.
/* Bad CSS */
box-shadow:0px 1px 2px #CCC,inset 0 1px 0
#FFFFFF
}
/* Good CSS */
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
©10/3/2015

43. CSS Syntax
Property and
Color Values
Don't prefix
property values or
color parameters
with a leading zero.
/* Bad CSS */
margin:0px 0px 15px;
/* Good CSS */
margin-bottom: 15px;
©10/3/2015

44. CSS Syntax
Property and Color
Values
• Lowercase all hex
values, e.g., #fff.
• Use shorthand
hex values where
available, e.g., #fff
instead of #ffffff.
Why?
Lowercase letters are much
easier to discern when
scanning a document as they
tend to have more unique
shapes.
©10/3/2015

45. CSS Syntax
Zero Values
Avoid specifying
units for zero
values.
/* Bad CSS */
margin: 0px;
/* Good CSS */
margin: 0;
©10/3/2015

46. Declaration Order
Related property declarations should be
grouped together following the order:
– Positioning
– Box model
– Typographic
– Visual
©10/3/2015

47. Don't use @import
It is slower, adds extra
page requests, and can
cause other problems.
• Use multiple <link>
elements
• Compile your CSS
with a preprocessor
like Sass or Less into
a single file.
<!-- Avoid @imports -->
<style> @import url("more.css");
</style>
<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
©10/3/2015

48. /* Comments */
Lastly, comment, comment, comment!
Keep in mind that Code is written &
maintained by people.
Ensure your code is descriptive, well
commented, and approachable by others.
©10/3/2015

49. /* Comments */
Great code comments convey context or
purpose. Do not simply reiterate a
component or class name.
©10/3/2015
/* Bad example */
/* Modal header */
.modal-header {
...
}
/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}

50. #1 CSS Resource
High-level advice and guidelines for
writing sane, manageable, scalable CSS:
http://cssguidelin.es/
CSS Guidelines is developed by Harry Roberts, a Consultant Front-end Architect from the UK.
©10/3/2015

51. Conclusion
When you learn to write code beautifully, you
will be compared to Jeff Dean, who…
…has to unoptimize his code so that
reviewers believe it was written by a human.
©10/3/2015