CodePen<\/a>.<\/p>\nNow we have several variations of our media pattern: we have the default variation, the card variation, the object variation, and finally the slat variation. These variations of our pattern are all useful in different circumstances, and they all make sure of the same underlying foundation of code! What\u2019s great about this is that any change that happens to our pattern will affect all patterns, so each instance of this pattern will remain in sync and consistent.<\/p>\n
Conclusion<\/h3>\n
We have covered why extendable components and patterns are better when building interfaces, which center around flexibility and maintainability. And to illustrate this, we covered the steps involved in creating some extendable components. The advantages of building interfaces in this way will become apparent right away because you will spend less time refactoring due to an unexpected design change or addition, and your styling that makes up these components will be easier to maintain.<\/p>\n","protected":false},"excerpt":{"rendered":"
The following is a guest post by Jon Yablonski. Jon is going to show us an example of how we might approach markup such that one component is particularly versatile. It works as-is, and has a standardized way of making variations (adding a single class) that allow the design to be altered to fit the […]<\/p>\n","protected":false},"author":18862,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[730,823,624],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":303926,"url":"https:\/\/css-tricks.com\/considerations-for-creating-a-card-component\/","url_meta":{"origin":244866,"position":0},"title":"Considerations for Creating a Card Component","date":"March 2, 2020","format":false,"excerpt":"Even a simple Card component can be tricky to design an API around. What abstraction are you providing? How much control do you want to give? If you make it too flexible, you aren't providing much value. If you make it to rigid, you also aren't providing much value.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/component-variations.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353386,"url":"https:\/\/css-tricks.com\/developer-decisions-for-building-flexible-components\/","url_meta":{"origin":244866,"position":1},"title":"Developer Decisions For Building Flexible Components","date":"October 7, 2021","format":false,"excerpt":"Blog posts that get into the whole \"how to think like a front-end developer\" vibe are my favorite. Michelle Barker nails that in this post, and does it without sharing a line of code! We simply can no longer design and develop only for \u201coptimal\u201d content or browsing conditions. Instead,\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/2-flexible-components-css.webp?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":286623,"url":"https:\/\/css-tricks.com\/making-web-components-for-different-contexts\/","url_meta":{"origin":244866,"position":2},"title":"Making Web Components for Different Contexts","date":"May 2, 2019","format":false,"excerpt":"This article isn\u2019t about how to build web components. Caleb Williams already wrote a comprehensive guide about that recently. Let\u2019s talk about how to work with them, what to consider when making them, and how to embrace them in your projects. If you are new to web components, Caleb\u2019s guide\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/WC-CONTEXTS-2.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":267066,"url":"https:\/\/css-tricks.com\/using-sass-control-scope-bem-naming\/","url_meta":{"origin":244866,"position":3},"title":"Using Sass to Control Scope With BEM Naming","date":"February 28, 2018","format":false,"excerpt":"Controlling scope is something you probably don't tend to consider when working with CSS and Sass. We have had access to the ampersand (&) for quite some time now, which gives us a level of scope\u2014but it's easy for it to lose its usefulness when you're nested quite deeply. The\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/ampersand.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337892,"url":"https:\/\/css-tricks.com\/intrinsic-typography-is-the-future-of-styling-text-on-the-web\/","url_meta":{"origin":244866,"position":4},"title":"Intrinsic Typography is the Future of Styling Text on the Web","date":"April 20, 2021","format":false,"excerpt":"The way we style text hasn\u2019t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. This is especially true of text styling. We write code\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/type-scale.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305838,"url":"https:\/\/css-tricks.com\/styling-in-the-shadow-dom-with-css-shadow-parts\/","url_meta":{"origin":244866,"position":5},"title":"Styling in the Shadow DOM With CSS Shadow Parts\u00a0","date":"April 13, 2020","format":false,"excerpt":"Safari 13.1 just shipped support for CSS Shadow Parts. That means the ::part() selector is now supported in Chrome, Edge, Opera, Safari, and Firefox. We\u2019ll see why it\u2019s useful, but first a recap on shadow DOM encapsulation\u2026 The benefits of shadow DOM encapsulation I work at giffgaff where we have\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/intersecting-parts.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244866"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/18862"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244866"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244866\/revisions"}],"predecessor-version":[{"id":245153,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/244866\/revisions\/245153"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=244866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}