TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Atomic Design

60 pointsby 0x4542over 6 years ago

6 comments

Yokohiiiover 6 years ago
Is someone actually doing this? A peer wanted to. He was pretty much just doing some atoms and was enthusiastic about it. But that project fell apart because he had no real idea how to put everything together. I feel this concept is more like a well told story then something productive useful.
评论 #18017692 未加载
评论 #18021236 未加载
mattkevanover 6 years ago
We use most of the principles of atomic design, but not the terminology. Atoms and molecules and whatnot are a cute analogy but make the concepts harder to explain, not simpler.<p>It’s pretty simple: Design the smallest bits - headings, paragraphs, buttons etc, and combine them into progressively larger components. Use only those components, adding new ones if absolutely necessary.<p>At work we’re in the process of moving a 20+ year old website with many thousands of pages to a completely component-based system. We’ve gone from about 70 templates to three, massively simplified the stylesheet and increased development speed as new pages are built from ready-made and tested components rather than buildings every page from scratch.<p>By doing this it means that UX, design and code can be kept consistent through design, development and maintenance.
pcmaffeyover 6 years ago
Atomic design principles are super fit for React component libraries. I don&#x27;t take the atoms &gt; molecules &gt; organisms pattern quite literally though, as functionally, it makes more sense to group atoms and molecules (composed of atoms) into a single dictionary of components, like a toolkit. I simply `import { hammer, nails, thumb } from tools`...<p>And then, my organisms are usually groups of organs, that are specific implementations or modules within the app. Anytime I build an abstraction of an organ to be used in multiple organisms, it can probably be added to my toolkit.<p>Also, I use CSS-Modules and avoid Redux wherever possible, because I build my applications such that state, style, and function are all local &amp; self-contained... avoiding global variables as much as I can.
beaconstudiosover 6 years ago
In my experience, Atomic Design&#x27;s interesting principle is that of separating Atoms and Molecules. Between Molecules and Organisms it gets fuzzy and arbitrary, and Pages&#x2F;Page Templates are not a new concept. It&#x27;s a cool-sounding design language tool and Atoms are really useful, but that&#x27;s the only positive innovation I&#x27;ve experienced from using it at a previous workplace.
评论 #18017047 未加载
评论 #18026480 未加载
jcutrellover 6 years ago
Not necessarily immediately relevant, but Brad is going through some tough family times at the moment.<p><a href="https:&#x2F;&#x2F;twitter.com&#x2F;brad_frost&#x2F;status&#x2F;1039491001130405889" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;brad_frost&#x2F;status&#x2F;1039491001130405889</a><p>Perhaps pick up the book to support him (it&#x27;s excellent), or maybe send a stranger a positive Tweet or email or whatever.
jeanlucasover 6 years ago
This is from 2016, any reason to post it again?
评论 #18016408 未加载