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

Frontend Guidelines

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
200
高速開発のためのコード整理術
Avatar for sutetotanuki sutetotanuki
1
400
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.2k
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
770
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
170
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
280
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
Avatar for azukiazusa azukiazusa1
1
730
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
580
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.3k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
430
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
99
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
49

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