--- title: Best Smashing Magazine posts — May 2024 | daily.dev description: The most upvoted Smashing Magazine posts from May 2024, curated by the daily.dev community. canonical: https://daily.dev/sources/smashing/best-of/2024/05 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/sources/smashing/best-of/2024/05 og:type: website og:site_name: daily.dev og:title: Best Smashing Magazine posts — May 2024 | daily.dev og:description: The most upvoted Smashing Magazine posts from May 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 Smashing Magazine — May 2024 1. 1 [](https://daily.dev/posts/combining-css-has-and-html-select-for-greater-conditional-styling-smashing-magazine-pojzmpyxq "Combining CSS :has() And HTML For Greater Conditional Styling — Smashing Magazine") Article Smashing Magazine · 2y Combining CSS :has() And HTML For Greater Conditional Styling — Smashing Magazine Learn how to use the :has() pseudo-class in CSS to apply conditional styling based on a selected option in a element. This technique allows for styling not only the selected element, but also its parent and even further up the chain. Practical use cases include styling mandatory elements and creating style variations of components. 41 2. 2 [](https://daily.dev/posts/modern-css-layouts-you-might-not-need-a-framework-for-that-smashing-magazine-5utpwjhzb "Modern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine") Article Smashing Magazine · 2y Modern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine This post explores how to create modern CSS layouts without the need for a framework. It introduces four CSS classes for different layout approaches, including fluid layouts and repeating layouts. The article also covers the use of cascade layers and CSS variables for greater control over the layouts. 31 3. 3 [](https://daily.dev/posts/beyond-css-media-queries-smashing-magazine-f8lpaiarr "Beyond CSS Media Queries — Smashing Magazine") Article Smashing Magazine · 2y Beyond CSS Media Queries — Smashing Magazine Media queries have limitations in terms of viewport focus, difficulty in management, and lack of responsiveness. Flexbox and Grid are alternative options for responsive design. Container queries allow for context-aware responsive layouts. 24 1 4. 4 [](https://daily.dev/posts/decision-trees-for-ui-components-smashing-magazine-gbbcxrjrm "Decision Trees For UI Components — Smashing Magazine") Article Smashing Magazine · 2y Decision Trees For UI Components — Smashing Magazine Design teams can use decision trees for UI components to avoid never-ending discussions, confusion, and misunderstanding. Examples of decision trees for UI components are provided by Doctolib, Workday, Lyft, NewsKit, and Nucleus. 16 [See all Smashing Magazine archives](/sources/smashing/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/sources/smashing/best-of/2024/05#page","url":"https://daily.dev/sources/smashing/best-of/2024/05","name":"Best Smashing Magazine Posts — May 2024","description":"The most upvoted Smashing Magazine posts from May 2024, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/sources/smashing/best-of/2024/05#items","numberOfItems":4,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/combining-css-has-and-html-select-for-greater-conditional-styling-smashing-magazine-pojzmpyxq","name":"Combining CSS :has() And HTML For Greater Conditional Styling — Smashing Magazine"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/modern-css-layouts-you-might-not-need-a-framework-for-that-smashing-magazine-5utpwjhzb","name":"Modern CSS Layouts: You Might Not Need A Framework For That — Smashing Magazine"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/beyond-css-media-queries-smashing-magazine-f8lpaiarr","name":"Beyond CSS Media Queries — Smashing Magazine"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/decision-trees-for-ui-components-smashing-magazine-gbbcxrjrm","name":"Decision Trees For UI Components — Smashing Magazine"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Sources","item":"https://daily.dev/sources"},{"@type":"ListItem","position":3,"name":"Smashing Magazine","item":"https://daily.dev/sources/smashing"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/sources/smashing/best-of"},{"@type":"ListItem","position":5,"name":"May 2024"}]}]} ```