How to deal with CSS
Summary
The common pitfalls with CSS and different approaches to make sense of the project's design, front-end and maintenance. This is a more philosophical post where I overview my experience dealing with CSS and to find the best approach (methodology) for the project.
I believe no Front-end developer manages to escape from using Bootstrap CSS in at least one project. Sometimes, I notice this pattern:
- First is Bootstrap CSS
- Plugins for Bootstrap CSS
- Bootstrap Theme overrides CSS
- Overrides to accommodate some specific design changes CSS
- Other overrides for some components changed over time, and nobody is sure which CSS should be refactored, so there is a lot of CSS.
And the list goes on.
A long time ago, I joined a project that had ~1 MB of CSS (minified). That was a simple marketing website, which wasn’t too big. I mean, the size of the CSS is the same as a medium-sized Web App. Imagine the pain for the users on a mobile device without good internet to load a website.
Does that mean that Bootstrap is the wrong choice? Of course not. A Bootstrap is a tool. It works for many cases but probably not for all. More important, however, is how the team is using Bootstrap. Usually, with Bootstrap (or a similar framework), the first steps are rapid. Layout and primary structure, menu, dropdowns, and forms fly in and out. Happy times.
However, after some time in those projects, I notice custom CSS is added with something like this:
margin-bottom: 8px, display: none, text-align: right instead of using the classes for elements like so:
mb-2 d-none text-end, and I wonder why?
If the project uses Bootstrap, the logical step is to reuse all its goodies. For example, look at what you
can do with text alone:
Bootstrap Text.
Now you can add media queries like text-{media}-end where media could be sm,
md, lg, you got an idea..
With SCSS Bootstrap, you can reduce the size by choosing only those Components you will use in your project. That way, you can slim the size of your project even more.
My approach is to re-use as much as possible from the Framework and use additional CSS for describing exceptional design cases like background images, custom-made components like Carousel or Slides and similar. That way, CSS would be lean and more manageable. Also, that would help remove unused CSS, especially if we keep each component in a separate SCSS file.
Why use Framework?
Well, it is convenient. There is some structure, team members have good documentation, and all those forms, dropdowns, layouts, and grids are defined and ready for use, right?
There is also a downside. Design is boxed in the Framework paradigm. It should be. Otherwise, what’s the point? I don’t think it is a big issue, but aligning with the design team is essential. Also, there should be an agreement with designers to consider a specific Framework before the design is created.
Different approach
You can choose to work from scratch, which gives complete freedom; however, some rules must be set even then. Also, it will be a bit slower at the start as you have to define layout, grid, and typography by yourself.
I'm unsure how to describe it better, but it is more about setting a mental framework and agreeing on rules with the team on usage, naming convention and folder structure. It is important.
For example, this old post from 2016 about the 8-point grid system is still relevant today.
Intro to the 8-point grid system
So, this tiny agreement with the team (designers and developers) to use an 8pt grid makes life simpler for all. There are plenty of articles. Google “8pt grid system” and dig in!
What is the value of the 8pt system?
For designers: Efficiency means fewer decisions to make while maintaining a quality rhythm between your elements.
For Teams: An easy communication system between designers and developers (no fussing over pixels). A developer can quickly eyeball an 8-point increment instead of measuring each time.
For Users: Consistent aesthetics for the brand they trust. No blurry half-pixel offsets on their preferred device.
By the way, you can also adopt Bootstrap for the 8-point grid system by changing the grid-gutter-width from 30px to 16px. There are probably a few more settings to adjust.
Methodology
Ok, so we are speaking about methodology, not Framework.
There has to be an agreed approach on how to tackle design tasks.
For example, take a look at CUBE: CUBE examples
"CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium you’re working in—often the browser—rather than against it.”
Here is a long read about Cube’s approach: CUBE CSS
Not entirely sure about this writing style of CSS: <div class="[ card__content ] [ flow
]">
This a bit oldish post (2014), but don’t be fooled and it does explain flow ideas and how to write them in detail: Axiomatic CSS and Lobotomized Owls
On a side note, have you noticed that all examples use margin-top to separate elements from each other? At first, it feels counterintuitive, but it is not. When a component/element goes on the page, it doesn’t know if the below will be a title, gallery or form. That means that the margin-bottom could be wrong. However, the element itself knows how far it should be from the element above. Gallery maybe margin-top:0, where h1 title margin-top: 2em;
No, I’m not a CUBE fan, but it is the closest to my “own Methodology”. I am not as brave as CUBE. I do slightly bloat CSS as I add a specific file for each component, but it gives me a clear understanding of what is where.
From my experience, maintenance is also essential. It is so satisfying to delete an old component and remove all CSS and know that there won’t be any damage done for the rest of the project.
Epilogue
The primary purpose was to stress that CSS is neither simple nor easy. It gives a lot of freedom, but that comes with a price. There are loads of good CSS Frameworks, each with its own methodology. Once you pick one, it makes sense to learn it, use it, apply design and think in a way that Frame is designed.
What is your favourite approach to tackling CSS?