Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Best Practices
Search
mahdi pedramrazi
November 19, 2013
Programming
0
120
CSS Best Practices
mahdi pedramrazi
November 19, 2013
Tweet
Share
More Decks by mahdi pedramrazi
See All by mahdi pedramrazi
CSS Shapes
pedramphp
1
59
Node.js Application Architecture.
pedramphp
0
850
Build Your Application On Node.js
pedramphp
1
120
How to write UI Components
pedramphp
0
88
Other Decks in Programming
See All in Programming
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
WebGLで始める コンピュータグラフィックス入門
heller77
0
360
Try creating your own orderedmap
kazamori
1
270
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
34
9.8k
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
350
Fast JSX: Don't clone props object #28768
yossydev
1
220
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
570
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
2
210
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
210
VS Code をプロダクトにどう取り込むか
onomax
1
790
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
12
4.3k
Featured
See All Featured
Teambox: Starting and Learning
jrom
128
8.4k
Ruby is Unlike a Banana
tanoku
96
10k
Making Projects Easy
brettharned
109
5.5k
Docker and Python
trallard
35
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
4 Signs Your Business is Dying
shpigford
176
21k
Art, The Web, and Tiny UX
lynnandtonic
290
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
YesSQL, Process and Tooling at Scale
rocio
165
13k
A Tale of Four Properties
chriscoyier
153
22k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Visualization
eitanlees
137
14k
Transcript
CSS Best Practices Mahdi Pedramrazi
#1 Don’t repeat yourself.
DO YOU SEE THE PROBLEM
CAN WE DO BETTER ?
CREATING REUSABLE UNITS
USING CSS PREPROCESSOR Even more reusable units Less
File
#2 Don’t Introduce complexity.
Avoid Using !important
Don’t Use Inline CSS ProperQes <div style=“color: red;”></div>
Avoid Doing Styling With JavaScript
Avoid Using CSS classes used for styling in JS
Bad Good
#3 WRITE LESS CODE
CREATE REUSABLE CLASSES AND MARKUP
WRITE LESS MARKUP Faster reflow and rendering
Thank You