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
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
Avatar for Iury Souza iurysza
0
140
Navigation 2 を 3 に移行する（予定）ためにやったこと
Avatar for yokomii yokomii
0
340
概念モデル→論理モデルで気をつけていること
Avatar for sunnyone sunnyone
3
290
MCPでVibe Working。そして、結局はContext Eng（略）/ Working with Vibe on MCP And Context Eng
Avatar for r-kagaya rkaga
5
2.3k
私の後悔をAWS DMSで解決した話
Avatar for 平目 hiramax
4
210
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
Avatar for Marco Roth marcoroth
0
710
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
Avatar for Tomoya Miwa tomoya0x00
0
3.3k
意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn
Avatar for teamLab teamlab
PRO
2
770
Reading Rails 1.0 Source Code
Avatar for Masafumi Okura okuramasafumi
0
250
ぬるぬる動かせ！ Riveでアニメーション実装🐾
Avatar for Kuno Ayana kno3a87
1
230
個人開発で徳島大学生60％以上の心を掴んだアプリ、そして手放した話
Avatar for akidon0000 akidon0000
1
130
ProxyによるWindow間RPC機構の構築
Avatar for syumai syumai
3
1.2k

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
15k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
13k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
70
11k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
What’s in a name? Adding method to the madness
Avatar for Product Marketing Alliance productmarketing
PRO
23
3.7k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
696
190k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.9k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k

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