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

Frontend Guidelines

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
110
Lambda のコードストレージ容量に気をつけましょう
Avatar for tatsuki-yamada tattwan718
0
130
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
Avatar for hisatake hisatake
0
280
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
570
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.3k
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
AI & Enginnering
Avatar for codelynx codelynx
0
110
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
280

Featured

See All Featured
Done Done
Avatar for chrislema chrislema
186
16k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
287
14k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
170
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
62
49k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
250
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.7k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
340

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