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
110

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
73
How Browsers Render
Avatar for Ricardo Andrés Bello ricardoaandres
0
93
Bower + Rails
Avatar for Ricardo Andrés Bello ricardoaandres
0
130
Rails Frontend Optimisations (part 1)
Avatar for Ricardo Andrés Bello ricardoaandres
0
68

Other Decks in Programming

See All in Programming
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.7k
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
170
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
170
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
100
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
210
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
190
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
380
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
Avatar for Date Huang tjjh89017
0
160

Featured

See All Featured
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.1k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
BBQ
Avatar for Matthew Crist matthewcrist
89
10k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
230k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
Avoiding the “Bad Training, Faster” Trap in the Age of AI
Avatar for Mike Taylor tmiket
0
76
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Designing for Performance
Avatar for Lara Hogan lara
610
70k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
430

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