DEV Community

CSS Grid Layout vs CSS Frameworks: When To Use What

Johnathon roy on November 29, 2019

“CSS Grid or CSS Framework? What should I use for my next project?” It is a question often asked by web developers, specifically new ones after the...
Collapse
 
roblevintennis profile image
Rob Levin

Interesting discussion Johnathon!

introducing tons of needless CSS styling rules that will never be used will weigh down your project

So I'm the creator of AgnosticUI which is a much lesser known of these frameworks (hopefully only because it's new!) and I started the project with a Flexbox abstraction. It was very nice as abstractions go and for devux and what not, but it in fact added an insane amount of classes! It was also a nightmare to maintain, so I ditched it entirely.

I'm also a very reluctant user of css utility classes for similar reasons — but also have to acknowledge how popular they've become and how many solid devs choose to use them (JavaScript devs generally hate CSS and even sometimes fear it!). My issue with that is that you're literally learning an entirely new DSL (domain specific language) which also requires that you actually DO understand some CSS in the first place. That said, I sprinkled a few utilities into AgnosticUI very selectively in efforts not to explode generated CSS (.flexbox, items-center, etc.) as I found myself wanting to code these into fast prototypes so often where I didn't have convenient access to a stylesheet (think Storybook, or Vitepress, or some other controlled env). But these too can "explode" and bloat as well so it's a very tricky dance!

CSS grid itself is amazingly powerful and I believe your thesis and primary point is to show that it's now mostly available to the user agents we'd care about. I'd also point out to folks that Microsoft has announced IE11 end of life coming in June 15 and that's a huge factor because it means stodgy IT departments will be forced to upgrade many folks. Unfortunately, governmental health departments (of all places) likely will continue to lag behind so I have empathy for those that cannot use it. But, we at some point have to move forward! AgnosticUI uses no margin-left as simply using logical properties like margin-inline-start gives you support for languages across the globe for free! So, am I for example being less inclusive by choosing to not support IE11? Or, more inclusive because I'm using these more inclusive but newer features?

When folks consider being inclusive by supporting backwards compatible browsers and customers, they should also consider the inverted price of excluding progressively enhanced features like logical properties.

Oh they other thing I finally wanted to mention which prompted me to start writing this comment is you can most definitely (and should!) use Bootstrap and really most any CSS frameworks in a modular way.

Most folks that just include the entire thing are basically getting what's in this script assuming they're in an SCSS environment otherwise they're pulling in a final CSS dist. But, the point is simply this:

  1. Copy github.com/twbs/bootstrap/blob/mai...
  2. Comment everything out
  3. Watch your builds fail (Webpack, Vite, Rollup, whatever)
  4. Import the things that are obviously low level requirements to BS like the utilities and reset and what not
  5. Add in typography and other generalized ones you're using in your cascade
  6. Start to only add components you're using. For example, using Bootstrap's button, simply uncomment that. Using the Accordion, uncomment that.

I retroactively did this for a site that was already well under way at work and it was easy to do global searches for things like .carousel and determine if the module was in use or not (especially with the builder errors if you take it out yet it's needed).

Gosh, I really wish developers would work this way. I can tell from many years of real life experience almost all shops are just dumping these top-level files into their codebase. I can honestly say and will debate anybody, Bootstrap's code is quite good, very customizable, and absolutely does NOT have to "look like Bootstrap" one bit -- user error! And I say this as someone who's decided to compete with Bootstrap and create my own framework.

Last point, if you were to say snag only the few CSS scripts from my AgnosticUI and custom roll your own because you're anal about performance and like to mainly code things yourself...I would probably buy you a beer if I saw you in a bar :-) I too like to do my own stuff by hand. But, also have come to enjoy the ROI of strategically leveraging boilerplate from others. Just be strategic! Be modular. Use the damn import statement ❗ 💥 😄

Thanks again Johnathon. I hope you don't mind the long comment.

Collapse
 
jarek profile image
Jarosław Księżuk

css grid has an issue in chrome, row limit is 999

More: bugs.chromium.org/p/chromium/issue...

Collapse
 
jlrxt profile image
Jose Luis Ramos T. • Edited

Empiezo a amar CSS grid/ está lectura me re sulto útil gracias.