Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

KonMariCSS

Avatar for Vince Vince
November 26, 2017
Programming
0
94

 KonMariCSS

How to Tidy Your Space and Change Your Life

Avatar for Vince

Vince

November 26, 2017
Tweet

More Decks by Vince

See All by Vince
Patterns, Language, and the tale of the Million Dollar Button
Avatar for Vince snailbites
1
550

Other Decks in Programming

See All in Programming
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
0
430
tparseでgo testの出力を見やすくする
Avatar for utagawa kiki utgwkk
1
120
これだけで丸わかり！LangChain v1.0 アップデートまとめ
Avatar for os1ma os1ma
6
1.3k
Level up your Gemini CLI - D&D Style!
Avatar for Riccardo Carlesso palladius
1
170
sbt 2
Avatar for kenji yoshida xuwei_k
0
180
『実践MLOps』から学ぶ DevOps for ML
Avatar for Satsuki Nagae nsakki55
2
540
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
0
330
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
130
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
Avatar for Shogo Fukami shogo4131
5
1.9k
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.1k
【Streamlit x Snowflake】データ基盤からアプリ開発・AI活用まで、すべてをSnowflake内で実現
Avatar for Ayumu Yamaguchi ayumu_yamaguchi
1
110
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
Avatar for SatoAoaka satoaoaka
0
200

Featured

See All Featured
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
460
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
514
110k

Transcript

  1. KonMari CSS How to Tidy Your Space and Change Your

    Life*

  2. Vincent Nalupta Senior Software Engineer @snailbites

  3. HUNGRY + ANGRY = HANGRY

  4. First, some context...

  5. None
  6. None
  7. None
  8. None

  9. ¯\_(ツ)_/¯

  10. The KonMari Cleaning Method

  11. KonMari CSS How to Tidy Your Space and Change Your

    Life*

  12. ANALYZE PLAN REFACTOR OPTIMIZE

  13. ANALYZE PLAN REFACTOR OPTIMIZE

  14. “Place every piece of clothing in the house on the

    floor.”

  15. File size Selector count Maintainability Load times

  16. cssstats.com

  17. None

  18. 360 KB (76KB minified gzipped)

  19. "Before you start, visualize the destination"

  20. ANALYZE PLAN REFACTOR OPTIMIZE

  21. Identify your goals

  22. 1 month 3 months 1 year

  23. What problems are you trying to solve?

  24. Settle on a naming convention

  25. .parent <section class=”parent”> </section> -child <div class=”parent-child”> </div> -gchild <p

    class=”parent-child-gchild”> ... </p>

  26. .box--delivery .box--pickup

  27. None

  28. UI Testing

  29. https://github.com/webdriverio/webdrivercss

  30. "The moment you start, you reset your life."

  31. ANALYZE PLAN REFACTOR OPTIMIZE

  32. Refactor a single file “Code as Craft”

  33. None
  34. None

  35. Break

  36. File size Selector count Maintainability Load times

  37. ANALYZE PLAN REFACTOR OPTIMIZE

  38. Style guide driven development

  39. None

  40. Demo

  41. None

  42. Find the outliers

  43. http://bit.ly/2evMYuw

  44. End Game

  45. None

  46. Build some bridges!

  47. None

  48. @snailbites http://snailbites.com/blog/

  49. (504) 229-6828 #KonMariCSS