{"id":92080,"date":"2026-04-07T13:34:42","date_gmt":"2026-04-07T18:34:42","guid":{"rendered":"https:\/\/www.bricktowntom.com\/blog\/?p=92080"},"modified":"2026-04-07T13:34:42","modified_gmt":"2026-04-07T18:34:42","slug":"5-pitfalls-of-using-micro-frontends-and-how-to-avoid-them","status":"publish","type":"post","link":"https:\/\/www.bricktowntom.com\/blog\/04\/5-pitfalls-of-using-micro-frontends-and-how-to-avoid-them.html","title":{"rendered":"5 Pitfalls of Using Micro Frontends and How to Avoid Them"},"content":{"rendered":"


\n \"5
\n <\/a><\/p>\n

I recently wrote about five reasons why it’s worth adopting a micro frontend Architecture<\/a>. Of course, there are pros and cons to everything. Micro frontends are a fresh architectural approach, and are likely to represent the future of web development. At the same time, they come with a few pitfalls, and knowing them is critical to being able to address or avoid them completely.<\/strong><\/p>\n

In this article, you’ll learn the most important lessons my team and I learned while using micro frontends. Over a two-year period, we identified many issues with this architecture and made just as many mistakes. So, it’s time to share them to help you tackle or avoid them.<\/p>\n

Let\u2019s first recall what the micro frontend architecture is, and then dive into their pitfalls and how to avoid each of them.<\/p>\n

Micro Frontends in a Nutshell<\/h2>\n

Martin Fowler<\/a> defines the micro frontend approach to development as:<\/p>\n

\n

an architectural style where independently deliverable frontend applications are composed into a greater whole.<\/p>\n<\/blockquote>\n

When applied to web development, it implies having many independent small frontend applications being part of the same website or web application. As already mentioned here<\/a>, my team had used this approach with success. In particular, we had the opportunity to take advantage of all its benefits, such as scalability, technology independence, and maintainability. On the other hand, over the long term, we noticed some serious issues. So, we decided to abandon this architectural approach to move back to a more traditional monolithic architecture.<\/p>\n

This means that not only did we learn the good things that come with micro frontends, but also their major drawbacks. Let\u2019s now delve into them and see what we should have done to avoid or address them. <\/p>\n

<\/p>\n

1. Redundant Dependencies<\/h2>\n

Every micro frontend application is independent of the others by definition. In other words, a micro-frontend architecture involves more than one frontend application that should be able to work also without the others. To allow this, each of them has its own dependencies. So, looking at the whole, you’re losing the benefits of using a package manager. In fact, your entire application will likely consist of many versions of the same libraries, scattered across the micro frontends.<\/p>\n

This is undoubtedly a problem, because it makes your web application unnecessarily larger than its monolithic counterpart would be. This falls on the end users, who are forced to download more data. Moreover, this impacts the rendering time and consequently the Google Web Vitals<\/a> scores, also affecting your website\u2019s SEO.<\/p>\n

How to address this<\/h3>\n

A possible solution involves three steps. First, identify the set of common libraries across all the micro frontends. Second, create a micro frontend containing all the shared libraries. Then, update your micro frontends to make their built package import the required libraries from this shared project. <\/p>\n

As described in Martin Fowler\u2019s original blog post<\/a> from which this idea comes, sharing dependencies between applications presents many obstacles and can’t be considered an easy task to accomplish. So keep that in mind as you try to achieve this goal.<\/p>\n

2. Conflicting and Overlapping Styles<\/h2>\n

Again, technology and team independence is great, but it can also introduce some issues. This is particularly true when dealing with styling. In fact, each micro frontend can’t have its own style from a business point of view. This is because you definitely don’t want your applications to look composed of many patches. Everything should look consistent, both in terms of style, UI, and UX.<\/p>\n

Another problem deriving from having multiple frontends being part of the same application is that you can end up with unintentional CSS rule overrides. Undesired overlaps in terms of CSS become common when dealing with micro frontends, and you may find out about them after only deploying your application. The reason is that each team usually works only on its own application, and doesn’t see the whole picture before a deployment. <\/p>\n

These issues can negatively affect your brand reputation. Also, the end users will pay the price for these inconsistencies, especially in terms of UI.<\/p>\n

How to address this<\/h3>\n

The only possible solution when it comes to UI and UX is to make sure that each team talks to the other and has the same outcome in mind. Also, adding styled-components in the aforementioned shared micro frontend project could help here. Nevertheless, this would make each micro frontend application depend on that, and it breaks the underlying independence as a consequence. But at least it will prevent your application as a whole from looking heterogeneous. <\/p>\n

If you want to avoid CSS overlapping, a solution involves adding an ID to the frontend container <div><\/code>. Then, configure webpack to insert this ID before each CSS rule. Otherwise, you could decide to adopt a CSS methodology such as BEM (Block-Element-Modifier). This encourages you to think of a website as a collection of reusable component blocks, whose class name should be unique within your project. Read introduction to BEM<\/a> to learn more about how this system works.<\/p>\n

\n Continue reading
\n 5 Pitfalls of Using Micro Frontends and How to Avoid Them<\/a>
\n on SitePoint<\/a>.\n <\/p>\n

Source: Site Point<\/p>\n

Republished by Blog Post Promoter<\/a><\/small><\/p>","protected":false},"excerpt":{"rendered":"

I recently wrote about five reasons why it’s worth adopting a micro frontend Architecture. Of course, there are pros and cons to everything. …<\/p>\n","protected":false},"author":1,"featured_media":92081,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23511],"tags":[128],"class_list":["post-92080","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ebusiness-emarketing","tag-advantage"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/01\/1643674637micro-frontend-pitfalls.jpg?fit=1200%2C680&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p3k0YU-nXa","jetpack-related-posts":[{"id":92809,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/communication-pitfalls-to-avoid-when-taking-time-off.html","url_meta":{"origin":92080,"position":0},"title":"Communication pitfalls to avoid when taking time off","author":"admin","date":"April 17, 2026","format":false,"excerpt":"Taking time away from work, whether you\u2019re vacationing in an exotic destination or just chilling out at home for a few days, is vital to stay healthy and maximize your career potential. But while you are perfectly entitled to take time off, it\u2019s important to communicate with your employees, bosses,\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93638,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/weekly-news-for-designers-%e2%84%96-659.html","url_meta":{"origin":92080,"position":1},"title":"Weekly News for Designers \u2116 659","author":"admin","date":"April 2, 2026","format":false,"excerpt":"8 Free Templates for Creating Memorable Openers in After Effects \u2013 Capture a viewer\u2019s attention with one of these impressive opener templates. Bringing Together Keyboard-only and Click-based UI Tests with keyboard-testing-library \u2013 This tutorial will show you how to test for keyboard navigation compatibility. Finer Grained Control Over CSS Transforms\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"Envato Elements","src":"https:\/\/i0.wp.com\/speckyboy.com\/wp-content\/uploads\/2019\/08\/envato-elements-weekly-news.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":92871,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/how-to-avoid-being-overwhelmed-by-your-side-projects.html","url_meta":{"origin":92080,"position":2},"title":"How to Avoid Being Overwhelmed by Your Side Projects","author":"admin","date":"April 19, 2026","format":false,"excerpt":"Side projects are a natural fit for web designers. They offer a chance to do something out of the ordinary and sharpen your skills. It can be a great way to further your career. And they are often a lot of fun to work on. At least, in the beginning.\u2026","rel":"","context":"In "Affiliate Marketing"","block_context":{"text":"Affiliate Marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/affiliate-marketing"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/05\/side-project-tips-01.jpg?fit=900%2C400&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/05\/side-project-tips-01.jpg?fit=900%2C400&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/05\/side-project-tips-01.jpg?fit=900%2C400&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.bricktowntom.com\/blog\/wp-content\/uploads\/2022\/05\/side-project-tips-01.jpg?fit=900%2C400&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":93767,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/3-low-cost-marketing-trends-for-the-new-normal.html","url_meta":{"origin":92080,"position":3},"title":"3 low-cost marketing trends for the new normal","author":"admin","date":"April 2, 2026","format":false,"excerpt":"This article was originally published on Sept. 9, 2020, and updated on Sept. 20, 2022. The pandemic forced a creative renaissance in marketing that we\u2019re still experiencing today in a post-pandemic world. The shift from huge budget professional shoots and marketing campaigns to low-cost, approachable content still remains in effect.\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":93432,"url":"https:\/\/www.bricktowntom.com\/blog\/03\/how-to-get-more-customers-with-youtube.html","url_meta":{"origin":92080,"position":4},"title":"How to get more customers with YouTube","author":"admin","date":"March 28, 2026","format":false,"excerpt":"As a small business owner, ever ask yourself why you\u2019re investing so much time and energy on your YouTube content when you\u2019re already spread thin by all of the things you have to do in running your business? Simple: small business creators get more customers with YouTube! Why is video\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":92231,"url":"https:\/\/www.bricktowntom.com\/blog\/04\/top-5-ssl-issues-for-pros-to-understand-and-avoid.html","url_meta":{"origin":92080,"position":5},"title":"Top 5 SSL issues for pros to understand (and avoid)\u00a0","author":"admin","date":"April 21, 2026","format":false,"excerpt":"The ubiquitous SSL certificate is often an afterthought when building websites for clients. It\u2019s often included with high-performance hosting products, making it tempting for pros to look at it as a set-and-forget application. No second thought is given to potential SSL issues. But then, that call\u2026 Yep, SSL issues can\u2026","rel":"","context":"In "E-business & E-marketing"","block_context":{"text":"E-business & E-marketing","link":"https:\/\/www.bricktowntom.com\/blog\/category\/ebusiness-emarketing"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/comments?post=92080"}],"version-history":[{"count":1,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92080\/revisions"}],"predecessor-version":[{"id":92194,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/posts\/92080\/revisions\/92194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media\/92081"}],"wp:attachment":[{"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/media?parent=92080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/categories?post=92080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bricktowntom.com\/blog\/wp-json\/wp\/v2\/tags?post=92080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}