Tips for writing clean, maintainable CSS
I am getting back into web development after like 8 years off. In the past, I created a fairly elaborate website, but the code-base was a bird's nest and unmaintainable.
Am currently building a responsive. mobile-first replacement for the aforementioned website, and I want to learn how to code like a professional front-end developer, and write code that is CLEAN, CLEAR, CONCISE, SCALABLE, and EASY-TO-MAINTAIN.
For now I am coding PURE HTML5 and CSS3 and want to stay away from frameworks as that won't help me to become a better developer.
What coding styles / approaches will help me to write better CSS?
Am reading "Smashing Book 5" right now, and in the "Testing and Debugging for Responsive Web Design" the author mentions "BEM".
Even 8-10 years ago, I knew there were better HTML / CSS coding approaches, but at the time I was focused on getting a working website, so I never dived into how to code "smart".
Would appreciate some advice and wisdom on this topic!!!
72 Replies
the easiest is to use a css preprocessor, like sass or stylus or less
Or learn a methodology
yes, like bem or cubit or whatever the name is
Yeah
also, dont try to use flex as grid and a grid as flex: you will only suffer
and use a modern css reset
dont try to roll your own half-assed attempt at it
Because?
What do you like about BEM?
So what css-reset do you recommend?
because then you can write your css with proper organization
i kinda don't like it. it gets overcomplicated to me, after a point. but some people love it
a good one is the bootstrap reset, but there are better ones
How about a CSS reset that is not part of a framework?
(I'm going bareback CSS for now)
the bootstrap reset can be used without bootstrap
So if you don't like BEM, then what are some CSS coding styles / approaches - NOT frameworks - that you do like?
Where would I get the file?
i just use my own way, but that's because i have an extensive experience
from bootstrap's github
but i think you can use npm to install just the reset
NPM?
nodejs' package manager
Can you offer some tips to avoid writing CSS that is messy and doesn't scale well?
the easiest is: don't overcomplicate
sometimes, the best way to get out of a brittle layout is to throw everything out and start over
a brittle layout is a layout that breaks every 5-10px, and you have to patch and patch and patch and patch and patch ...
a simple grid, usually, solves the issue
oh, and practice
write bad css, write horrible css, write css that not even a mother would love! but write more and more css
How well supported do you need ?
Veryy soon we will have prod level support for CSS cascade layers which may be helpful for what you’re looking for .
Kevin Powell
YouTube
No more specificity issues?! (or all new ones 🤔) - A look at CSS Ca...
Cascade layers are pretty much here, so it's time to learn how they work!
🔗 Links
✅ Stephanie Eckles article: https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/
✅ Bramus' article: https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/
✅ Una's video: https://www.youtube.com/watch?v=ilrPpSQJb3U
✅ ...
That is what I am doing. But I want to be sure that I don't create a 2nd brittle layout!
Yeah, but I did that. Now I need to learn how to write betetr CSS so I don't keep repeating prior mistakes
What do you mean?
then practice your layout making
take an exercise from a website and implement it
Is this a practice site where few ppl will see it? Or does it need to work for all kinds of visitor , building it for a client maybe ?
The video I linked will explain better than I can
It is for my startup business
Not sure how to ask this... How do you create CSS styles that are reusable but which don't create cascading hell and on the other end which do not become so specific that they cannot be reused?
That doesn’t tell me much more haha but cascade layers have been baseline for a couple years , are around 95% supported so you’d have to make the call whether the reward outweighs the risk, while taking your demo into account and which browsers they’re likely to use.
Just one suggestion for organizing your css . As is css nesting. Keep your reset together , element selectors together then anything specific to this project , with sections grouped together.
Like if you had three articles and each have a heading and a ul, do you keep it in order of article, heading, ul , article heading ul etc ? Or article article article heading heading heading ul ul ul ?
That depends how alike the styles are. They’ll probably be fairly close so you’ll only need one class per article , one selector for the heading , one class for the ul and will only need one set of styles. Any edge cases you can tackle as they come up.
Sorry, on the phone. So how do I use "CSS layers"? Is that something I can use with pure CSS or do I have to use a framework or preprocessor or a lot of the crap I don't want to use? If by "support" you mean "browser support", I have taken a lazy attitude having lived through IE6. My stance is, "Either you have a modern browser or it's not my problem!"
When you say, "Keep your reset together , element selectors together then anything specific to this project , with sections grouped together. " Can you explain that more?
Vanilla css , and it’s not something I can explain here- I linked the video that will introduce you to the concept
Not sure if I follow what you mean by article, article, article. My website is an online newspaper, and I hope to use page templates so one "article" template will be populated by the database and all news articles
I'll check out the video. Is "Vanilla CSS" a thing, or you just mean plain CSS?
In your stylesheet don’t scatter electors everywhere, keep “like” things together
- All your reset styles
- element selectors
- utilities
- project specific styles
- header styles
- hero section styles
- footer styles
Versus
- footer
- element selectors
- header styles
- some of the reset
- hero styles
- some more of the reset
- utilizes
Etc
Would using BEM help with that?
Vanilla CSS eg no frameworks , just “plain” CSS
I don’t use BEM but it’s just about the order you declare styles , not the classnames themselves . Even if you use BEM you could make a mess by not grouping “like” with “like”
I bought 26 books on web development to refresh. Most are from the former A Book Apart series. Am hoping that Rachel Andrew will get me down the right path. (I watch Kevin's videos when i can)
So it sounds like good CSS is about a lot of planning up front?
There’s a ton of new CSS to catch up on , depending on when those books were published you may have quite a bit more to catch up on in the CSS side
The issue I ran into before was that I create a couple of CSS selectors and all was well. Then I added some more, then some more, and 5,000 lines later, I had all of these one-off selectors and styles
I bought one of Grid and have been checking out some of Kevin's Flexbox and Grid videos
It’s always good to have a plan of action but part of writing organized css is to not just add your next rule at the bottom, you’re taking into account specificity and what part of the stylesheet makes sense.
This is why I suggested css layers as it makes it very clear where this declaration belongs
Don't have my old code handy, but in the past I did lots of really specifc styles like (exaggerating here) html > body > main > div.one > div.two > div.three {color: red}
I mean more like new functions min() and max(), view transitions, cascade layers, css nesting, relative colors, color-mix, @containers, anchors , style queries etc
So are CSS layers an approach or is it like a framework?
What about CSS nesting? Is that an approach or a framework?
And new selectors :is(), :has() , was which will be very helpful if you’re increasing specificity with selectors like this
And if I go to MDN, is that a good place to read up things?
It’s like nesting in SCSS but works in vanilla css.
https://youtu.be/YnWPeA6l5UE?si=txJgkSVNYmGcc8cL
Yea MdN is a recommended resource as is KPows videos and/or blog
Kevin Powell
YouTube
Getting started with CSS nesting
Nesting has landed in native CSS, and with Firefox gaining support for it, it is now supported in all the major browsers!
So let’s take a look at what nesting is, some of the gotcha’s with it, a little bit of how it differs from Sass nesting, and more.
🔗 Links
✅ Browser support: https://caniuse.com/
✅ The official spec: https://www.w3.org/TR/...
I amm late to the game. So Mozilla and MDN basically died 4 years ago?
Is MDN still relevent and recent?
MDN is still maintained
Are you familiar with the A Book Apart series?
Nope
They went out of business earlier this year, but have some of the best books on web dev out there and most are still relevant
(I bought a whole bunch off of eBay)
A Book Apart
A Book Apart - Collections
Mugs, shirts, and totes, oh my! Outfit yourself and support your favorite indie book publisher.
The ones I have read so far are excellent
If you were trying to code a responsive, mobile-first website from scratch using pure CSS, what areas would you focus on learning first when it comes to CSS? (You've mentioned several things, but I am trying to prioritize) It seems to me that learning FlexBox and Grids is important? And I guess CSS Layers and CSS Nesting are also really important?
(My goal is to have a basic mobile website up - at least in dev - in the next 21 days. That includes a home page with hamburger menu and slide out menu, a section home page, an article template page, and maybe a couple other simple pages)
Layout definitely. Layers and nesting are more tools that help with your original query about keeping your stylesheet organized.
But prioritize learning the foundation of how css works- the box model, containing blocks, positioning, the different display properties and how elements behave. So much of CSS #depends on styles you have already applied so knowing how those styles interact together is vital. You might want to look into some tutorials or courses that are comprehensive and take you through the curriculum in the right order
Are there some free written or samples from Kevin on CSS layers and nesting? (I guess you linked one above?) He has so many videos I need help targeting what I need first. I want to have a basic working website for mobile done by the end of January
What about reading through MDN? I think they have basic tutorials
KPow has some courses . MDN has a series of articles. W3 is very out date and would not recommend. Google has some too at https://web.dev/css . Scrimba has several free courses which are great (when it works) because it’s interactive and you code on their embedded editor, here’s one of their css course. And YouTube is full of tutorials and playlist courses
MDN Web Docs
CSS Tutorials - CSS: Cascading Style Sheets | MDN
Learning CSS may be a daunting task.
In order to help you, we have written numerous tutorials about CSS.
Some are aimed at complete beginners, while others present complex features to be used by more experienced users.
web.dev
CSS | web.dev
Introduction to CSS
This course contains 20 interactive tutorials and will teach you the basics of CSS in an hour. It's the perfect starting point for aspiring web d
Depends how you learn
*visually with videos, reading with articles and text , doing and applying in practice challenges etc
I have been happiest with my paper books so far
But I watch a lot of YT
Then it sounds like you’re all set with your books and then can fill in the gaps with MDN or google curriculum
Make sure you’re practicing and coding along though not just reading , have to put it into practice
They say the best way is to code along w the tutorial . Then delete and build from memory, referring back to specific parts when you get stuck . Then delete it and start again . Then delete that and give it a few days and build it again
Good advice. Knowing myself, I am going to read and highlight, and then start coding and re-reading as I go. RIght now I am just taking a 20,000 ft approach and trying to not make obvious learning (or doing) mistakes
Really look forward to getting back into coding after like 8 years away!
I'm reading about BEM right now, and one thing I see that jogs my memory is this... In one example they have this...
<form class="search-form search-form_theme_islands">
Where it appears they are AND'ing "search-form" and "search-form_theme_islands"
I recall from many years ago that this was one "approach" people took. Like maybe you would have <div class="myFavColor myFavFont myFavSize">
Does anyone still do that? And what are the Pro's and COn's of such an approach?
I don’t use BEM , so I can’t answer that. KPow had a video on BEM although if I remember correctly , he doesn’t use BEM any longer. With nesting and modern selectors that help with specificity , it’s not as big a deal anymore to have to have a bunch of classnames instead of using ancestor selectors eg
.product-list li or .product-list:has(li) .featured-btn
One thing about beating though you don’t want to nest too deep: with your example of your selector html > body > main > .div1 > .div2 implores me to warn you about how deep to nestKevin Powell
YouTube
Why I use the BEM naming convention for my CSS
If you've watched any of my recent videos, you'll know that I use the BEM naming convention for my CSS classes. In this video, I explore why I use it, and why I think you should, at the very least, use some sort of naming convention.
BEM stands for Block, Element, Modifier, and it presents us with a way to make more organized and readable CSS....
You’ll learn lots and be writing proper CSS that’s organized and well documented in no time !
So CSS layers and nesting replaces the need to use something like BEM? And you are saying Kevin has moved to that approach versus using BEM?
I’m not sure what Kevin is using in production projects , you could look at his website if you’re curious. I just remember in a video or two he has said that he doesn’t use BEM anymore. Nesting and modern selectors are tools that help replace the need for BEM
but don’t worry about any of this modern stuff just yet. Get the fundamentals down first , it’s super important to learn how and why properties behave the way they do and the impact different values have on the element itself and its ancestors AND descendants
I am a Mac person and hate Microsoft. In another forum a few weeks ago, I learn that Firefox is all but dead - certainly from a market share standpoint. I grew up - in web dev - using Firefox and Firefox Dev Tools. Now that Mozilla, Firefox and MDN are dying beasts - if not dead - what should I use to learn CSS and for dev tools as I code - so I can learn as you mention? I am intrigued by - what is it? - VS Code, but I really don't want to have to develop "on the dark side" using Chrome
I’m not sure what you’re asking; I linked a bunch of resources above. If you’re asking what browser to use, chrome is the most used browser but there’s no reason you can’t use Firefox if that’s your preference
If you don’t want to use VS code for your files, which with live server can be used on the browser of your choice , you can use something like CodePen or the iCodeThis editor
iCodeThis
Projects to improve your coding skills!
And MDN is still actively updated and maintained , I wouldn’t say it’s dying or dead
I was asking if I can still use Firefox and Firefox Dev Tools so that I learn the fundamentals correctly
You can use any browser you prefer , Firefox dev tools have some superior functionality to chrome imo
Good to know I can keep using FF. I do like how VS Code looks, so I might try using it instead of NetBeans.
VS code is an industry standard so knowing your way around would be advantageous. You can also change the theme , there’s a ton of colour themes to choose from.
The takeaways I get from what you said above - and not having had time to watch all of the videos yet - is that if I re-learn the fundamentals of CSS, and also learn new features in CSS3 using MDN and Kevin's videos, then I should be off to a good start. And hopefully learning those new features in CSS3 will address my concerns in my OP about keeping my CSS organized, right?
Newer features such as layers and nesting are tools that can help keep organized but just writing your stylesheet in a logical order (as mentioned keeping “like with like”) is basically the same thing visually anyway, just formatted differently than if they are wrapped in an @layer
Also, you may want to look through some codepens or GitHub repo stylesheets to get an idea on how others organize and document their stylesheets
But overall yes , sounds like a good plan 👍
And stay away from things like SASS for now?
I thought you wanted to stay away from preprocessors and frameworks anyway ? But yeah get your feet under you before diving into scss. Mixins and loops are neat but a lot of the features it provided , we can now do in vanilla css.
I do. Sorry. Reading my Smashing Book 5 and asking questions as I read. Like all people diving into coding, one question leads to another and another. So overwhelming. Hopefully if I write, good, modern CSS3 that will be enough
You’ll get there , just start with the fundamentals and I’m sure your books will take you through the curriculum in a logical order . Just make sure to practice practice practice and get those reps in for muscle memory and to teach yourself how one property affects the next
I want to get through at least half of my books before I code so I have a foundation - and to force myself to read all the books I bought, but I hope to start coding maybe next week?
Trying to take advantage of a lot of time off from work over the next two weeks
Still balancing working on my business and planning my new layout with learning how to re-code things
(There is soooo much more to learn in 2024 than in say 2014)
Is this still relevant?
Kevin Powell
YouTube
Improve your CSS by Keepin' it DRY
A look at keeping your code DRY, or in other words. DRY stands for 'Don't Repeat Yourself', and repeating ourselves is something we want to avoid when writing code. Not only is it good practice, but it can help you code a lot faster.
In this video, I take a look at a few practical examples of how you can DRY out your code, as well as a fun litt...