CSS Clean Up and Default Properties?

Hi. So I recently finished my Responsive Web Design Certification and you can check out my Portfolio Page here. It has links to all my other projects as well.

While doing the projects, one problem that I encountered was that I got confused while coding the CSS part. There were way to many paddings and margins to keep track of and it was frustrating as well. So is there some standard way of writing the CSS? To organise and make it less exhausting to use? I know about Bootstrap but I haven’t explored it yet because I’m doing JavaScript right now.

Also are there some basic, default properties that are always written in CSS files? Like I noticed in the FCC examples of the project, there was box-sizing: border-box; in every project.

Any help is appreciated. Thanks!

Yeah, CSS… a lot of use don’t like it much. But there are times where a little clever CSS can save you a lot of coding. Plus, it makes things look pretty.

To make it easier? Well, of course you mentioned libraries like Bootstrap. There are also things like Sass that make it a little easier to organize. I also once read through the book CSS Mastery and found it helpful. I also find this site to be a good reference. Their section on flex is something I look at often.

There are different methodologies, which one you pick is a personal preference (or team). I like a mix of things (OOCSS, components, and utility classes). I don’t really use preprocessors or BEM much.

So base classes you can extend, something like class="btn btn-primary, components which are often meant for a specific context, and then pure utility classes, which are just like utility functions in JS. They do one thing and you add them to your elements as needed.

You might also take a look at a utility-first CSS framework like Tailwind. I’m personally not a super fan of a pure utility-first, but at least you are not locked into a completely component-based framework either.

You get a lot of consistency going with component frameworks, but they also tend to look very similar. This can be both good and bad. For example, on mobile devices, consistency with the platform is preferable (e.g. Material Design). Component frameworks can also work great at scale for large teams. But if you are a single developer doing smaller projects and like to be more creative and don’t mind a bit of inconsistency it is a pretty dull approach.

Taking a utility classes approach can really help with this. You confine yourself to some specific sets of margin and padding and always just use the predefined classes. So .mt-2 for at top margin of 2rem (or whatever) and so on. It also helps with consistency.