--- title: Best Design Systems posts — July 2024 | daily.dev description: The most upvoted Design Systems posts from July 2024, curated by the daily.dev community. canonical: https://daily.dev/tags/design-systems/best-of/2024/07 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/design-systems/best-of/2024/07 og:type: website og:site_name: daily.dev og:title: Best Design Systems posts — July 2024 | daily.dev og:description: The most upvoted Design Systems posts from July 2024, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of Design Systems — July 2024 1. 1 [](/posts/practical-guide-to-creating-a-design-system-pbnxasdoh "Practical Guide to Creating a Design System") Article DEV · 2y Practical Guide to Creating a Design System Creating a design system involves selecting a suitable UI framework, defining both light and dark themes, and organizing the system into a reusable package. Using tools like Storybook for documentation and ensuring regression UI testing minimizes unexpected issues. Avoid custom CSS and components to reduce complexity and maintenance costs. While initially labor-intensive, this approach significantly reduces the marginal cost of developing new front-end pages. 250 4 2. 2 [](/posts/atomic-design-system-explained-9sei1bwxo "Atomic Design System Explained") Article Bootcamp · 2y Atomic Design System Explained Atomic Design, introduced by Brad Frost in 2013, is a methodology that breaks down user interfaces into fundamental components to create scalable, consistent, and maintainable design systems. The process is structured into five stages: Atoms, Molecules, Organisms, Templates, and Pages. This approach ensures a systematic and efficient design process, enhancing collaboration, scalability, and user experience. Key elements include typography, color palettes, icons, UI components, and design principles. Atomic Design is increasingly relevant for developing complex digital products that require a cohesive and adaptable design framework. 104 3 3. 3 [](/posts/css-classes-considered-harmful-inocsvau6 "CSS Classes considered harmful") Article Hacker News · 2y CSS Classes considered harmful The post argues against using CSS classes, considering them an outdated system that leads to various issues, such as combinatorial explosion and specificity conflicts. Instead, it suggests using modern web development tools like attributes, custom tag names, and custom states to better manage and style web components. The author critiques existing methodologies like BEM, Atomic CSS, and CSS Modules, highlighting their limitations and proposing attributes and custom tags as more robust alternatives. 32 8 [See all Design Systems archives](/tags/design-systems/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/design-systems/best-of/2024/07#page","url":"https://daily.dev/tags/design-systems/best-of/2024/07","name":"Best Design Systems Posts — July 2024","description":"The most upvoted Design Systems posts from July 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/design-systems/best-of/2024/07#items","numberOfItems":3,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/practical-guide-to-creating-a-design-system-pbnxasdoh","name":"Practical Guide to Creating a Design System"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/atomic-design-system-explained-9sei1bwxo","name":"Atomic Design System Explained"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/css-classes-considered-harmful-inocsvau6","name":"CSS Classes considered harmful"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"Design Systems","item":"https://daily.dev/tags/design-systems"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/design-systems/best-of"},{"@type":"ListItem","position":5,"name":"July 2024"}]}]} ```