Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frontend Guidelines

Avatar for Ricardo Andrés Bello Ricardo Andrés Bello
September 02, 2015
Programming
1
100

Frontend Guidelines

HTML and CSS good practices and what NOT to do (:
Avatar for Ricardo Andrés Bello

Ricardo Andrés Bello

September 02, 2015
Tweet

More Decks by Ricardo Andrés Bello

See All by Ricardo Andrés Bello
Rails Frontend Optimisations (part 2)
Avatar for Ricardo Andrés Bello ricardoaandres
0
68
How Browsers Render
Avatar for Ricardo Andrés Bello ricardoaandres
0
90
Bower + Rails
Avatar for Ricardo Andrés Bello ricardoaandres
0
130
Rails Frontend Optimisations (part 1)
Avatar for Ricardo Andrés Bello ricardoaandres
0
65

Other Decks in Programming

See All in Programming
Team operations that are not burdened by SRE
Avatar for zosokh kazatohiei
1
300
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
Avatar for アキキー akihisaikeda
3
320
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
1.2k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
Avatar for Márton Braun zsmb
1
280
Select API from Kotlin Coroutine
Avatar for Matsuda Jumpei jmatsu
1
220
Is Xcode slowly dying out in 2025?
Avatar for 上ちょ / uetyo uetyo
1
250
Deep Dive into ~/.claude/projects
Avatar for Yuya Hirayama hiragram
12
2.3k
WindowInsetsだってテストしたい
Avatar for RyuNen344 ryunen344
1
230
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
0
410
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
740
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
Avatar for Akira Kobori koboriakira
0
500
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
3
4.8k

Featured

See All Featured
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
680
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
18k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
223
9.7k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
69
11k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
39
1.9k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k

Transcript

  1. FRONTEND GUIDELINES

  2. HTML

  3. SEMANTICS <h1> <figure> <img alt=‘Company’ src=‘logo.png’> </figure> </h1> <h1> <img

    alt=‘Company’ src=‘logo.png’> </h1> <!-- bad --> <!-- good -->

  4. <div id=‘main’> <div class=‘article’> <div class=‘header’> <h1>Blog post</h1> <p>Published: <span>21st

    Feb, 2015</span></p> </div> <p>…</p> </div> </div> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime=‘2015-02-21’>21st Feb, 2015</time></p> </header> <p>…</p> </article> </main> <!-- bad --> <!-- good --> SEMANTICS

  5. <meta http-equiv=Content-Type content=‘text/html; charset=utf-8’ /> <link rel=‘stylesheet’ href=‘style.css’ type=‘text/css’ />

    <input type=‘email’ placeholder='[email protected]’ required=‘required’ /> <script src=‘main.js’ type=‘text/javascript’></script> <meta charset=‘utf-8’> <link rel=‘stylesheet’ href=‘style.css’> <input type=‘email’ placeholder='[email protected]’ required> <script src=‘main.js’></script> <!-- good --> <!-- bad --> BREVITY

  6. <h1><img alt=‘Logo’ src=‘logo.png’></h1> <div class=‘button’></div> <h1><img alt=‘Acid Labs’ src=‘logo.png’></h1> <button></button>

    <!-- good --> <!-- bad --> ACCESSIBILITY

  7. <!doctype html> <html> <head> <title></title> </head> </html> <!doctype html> <html

    lang=‘en’> <head> <meta charset=‘utf-8’> <title></title> </head> </html> <!-- good --> <!-- bad --> LANGUAGE

  8. <!doctype html> <html> <head> <title></title> <script src=analytics.js></script> </head> </html> <!doctype

    html> <html lang=‘en’> <head> <meta charset=‘utf-8’> <title></title> </head> <body> <script src=analytics.js></script> </body> </html> <!-- good --> <!-- bad --> PERFORMANCE

  9. CSS

  10. SEMI COLONS div { color: red } div { color:

    red; } /* bad */ /* good */

  11. NATURAL FLOW img { display: block; } img { vertical-align:

    middle; } /* bad */ /* good */

  12. NATURAL FLOW div { width: 100px; position: absolute; right: 0;

    } div { width: 100px; margin-left: auto; } /* bad */ /* good */

  13. SELECTORS div:first-of-type :last-child > p ~ * div:first-of-type .info /*

    bad */ /* good */

  14. SELECTORS img[src$=svg], ul > li:first-child { opacity: 0; } [src$=svg],

    ul > :first-child { opacity: 0; } /* bad */ /* good */

  15. SPECIFICITY .bar { color: green !important; } .foo { color:

    red; } .foo.bar { color: green; } .foo { color: red; } /* bad */ /* good */

  16. OVERRIDING li { visibility: hidden; } li:first-child { visibility: visible;

    } li + li { visibility: hidden; } /* bad */ /* good */

  17. INHERITANCE div h1, div p { text-shadow: 0 1px 0

    #fff; } div { text-shadow: 0 1px 0 #fff; } /* bad */ /* good */

  18. LANGUAGE :nth-child(2n + 1) { transform: rotate(360deg); } :nth-child(odd) {

    transform: rotate(1turn); } /* bad */ /* good */

  19. BREVITY div { transition: all 1s; top: 50%; margin-top: -10px;

    padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; } /* bad */ /* good */

  20. PREFIXES div { transform: scale(2); -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform:

    scale(2); transition: 1s; -webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } div { -webkit-transform: scale(2); transform: scale(2); transition: 1s; } /* bad */ /* good */

  21. ANIMATIONS div:hover { animation: move 1s forwards; } @keyframes move

    { 100% { margin-left: 100px; } } div:hover { transition: 1s; transform: translateX(100px); } /* bad */ /* good */

  22. UNITS div { margin: 0px; font-size: .9em; line-height: 22px; transition:

    500ms; } div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; } /* bad */ /* good */

  23. COLORS div { color: hsl(103, 54%, 43%); } div {

    color: #5a3; } /* bad */ /* good */

  24. DRAWING div::before { content: url(white-circle.svg); } div::before { content: "";

    display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; } /* bad */ /* good */
  25. None