The downside of too much flexbox CSS
In the last years the requirement for understanding and having experience with Flexbox CSS increased a lot on the web development jobs market.
This will be because of a few good reason:
- Flexbox CSS is doing a few things that with normal CSS was not so easy to do
- Frontend development with Flexbox CSS is much faster compared with not using it because of the automation that is doing when aligning elements in various ways
- It has the advantage of being a new feature supported by most new browsers and since is cool, it was fast adopted by web development companies
- It is relatively easy to start working with Flexbox CSS and does not require advance CSS logic
Even if all the above statements are true, I experienced a few negative sides that Flexbox CSS is bringing on a Front-end developer live.
Aligning and positioning elements using Flexbox CSS is a very good idea for prototyping and building because it can provide a fast and flexible implementation of a front-end despite the resolution of the screen. But this is coming with a big downside. When a site is getting more complex and the requirement of being perfect pixel is very important, the use of Flexbox CSS in excess will do more harm than good.
It should be used only where is absolutely helping and not on every element of a page just because is doing things more easily.
I experienced website build by other developers that I had to change, as being part of an agency, and I was amazed to see how much flexbox rules were used on a site. Basically all the site (or over 80% of it) was build with position: flexbox
I had to overwrite many of this elements to change things based on the new designs I received because flexbox positioning didn't respect the right alignment from the beginning and after because if didn't allow me to have a perfect pixel front-end implementation.
Having a lot of CSS experience I know I can do anything I need without the use of position: flexbox.
Like, if I need to align a few elements inline in the middle of a div, I will make the elements display: inline-block and do an text-align: center; on the parent. In this way I will have much more control on the distance between elements, the elements size and alignment with the elements outside of the parent. display: flexbox instead, will automatically disperse the elements depending on the gap and the alignment positioning but will bring a lot of bugs and misalignments with elements outside of their parent. If the new design wil require that the first element to have a fixed width and go to the left and the second one to follow, then a lot of the flexbox rules will have to be remove of overwritten, when with display: inline-block all you need to do is to remove the center alignment from the parent. See this page for how many bugs you can have when using flexbox
After working on a few projects where the previous developers where using too much flexbox positioning on anything I realised what is the biggest downside of using it. Not having a more advance CSS logic or if you have it you forget it while using flexbox for a long time, because it is much easier/faster and comfortable to do things with it.
In reality, the classic CSS tricks can do the same things but the logic involved to do the same things require more focus and a very good understanding on how to position elements in a page, how to align them, how to add a padding instead of a margin to create the gap between elements and use widths in percentages when creating a grid.
It is so much simple to have 2 inline elements with width: 50%, padding: 10px; box-sizing: border-box; (to take the padding from the 50% width and place a new element inside with width 100%) than using flexbox positioning.
Many of the today front-end developers will not even know about all the old best ways of aligning elements in a grid so they will use flexbox positioning in excess up to a point when they will abandon the project because it will be no way of solving things built only with flexbox in a proper way in a reasonable amount of time.