I used Bootstrap too often and I wonder how can I write good CSS without it?

Nathan Sebhastian on February 11, 2019

Hi everyone! I'd like to discuss with you all about learning CSS properly w/o using frameworks. What tutorials or roadmap do you think will help... [Read Full]
markdown guide
 

Try to learn Flexbox and CSS-Grid first, it should give you the tools to tackle most layout problems. Then I'd continue with typography and animations.

 

There's more than a couple CSS tutorials that I would recommend.

In particular, it may be a bore, but Jonas Schmedtmann's advanced css and scss course covers more than just the basics; more importantly, the course goes over CSS architecture and how to compose reusable components from scratch. It does gloss over the basics, but what do you expect from an advanced course.

This course along with my own personal projects really helped me make better, more meaningful CSS decisions as a developer rather than making decisions in what seems like a vacuum.

udemy.com/advanced-css-and-sass/

 

I was going to recommend Jonas Schmedtmann's Advanced CSS course but you already did. It's amazing!

 

He also has this course that you can take before the advanced one if needed... I haven't taken it but I'm tempted to. udemy.com/design-and-develop-a-kil...

That's a good one too. It really goes to show that being a 'full stack' developer tends to leave a tremendous deficit in other areas of expertise.

 

Have a look at tailwindcss which is a utility based css framework that is sort of between bootstrap and writing custom CSS. Each tailwind class only applies a single CSS rule which seems counter-productive at first but lets you build out something that looks good really quickly without going back and forward between html and CSS. Here's what it looks like:

<div class="flex flex-row items-start m-4">
    <button class="border border-red rounded text-red bg-white mr-4 px-4 py-2">One</button>
    <button class="border border-green rounded text-green bg-white px-4 py-2">Two</button>
</div>

This turns out to be a great way to learn CSS as you apply it directly to your markup in a more obvious and explicit way than writing the rules yourself.

Additionally, you start with some good default styles that are easy to customise, including media-queries, colour palettes, and REM based text, padding, and margin sizing.

 

I second the recommendation for tailwind. I've started using it, and I have learned so much more about CSS. It gives you sensible defaults for things like fonts, colors, and padding, and makes applying those rules super easy.

 

I think the best way is to practice it by implementing a design and referencing docs as you go (I prefer MDN's docs). This is good practice without being concerned with creating a design that you like.

CSS can be a different kind of difficult from other languages because the syntax is fairly simple to get started with, but having a deeper understanding and knowing the quirks takes experience. I think the biggest challenges are positioning, the box model, and display (block, inline, inline-block) properties. I feel these are the things that cause a lot of frustration with CSS because the time is not taken to review and reference these.

This is my general workflow when doing an HTML/CSS page. I think this allows me to more easily focus on one step at a time and eventually end up with a complete styled webpage.

  • I like to create the whole structure for a page in only HTML to make sure I understand all of the elements that need to be present and the normal document flow of these elements.
    • Trying to do both HTML/CSS at the same time is something I have seen other developers try, but I think that is difficult when trying to build a full page.
  • After that, I use CSS to position things where I like them.
    • This allows me to focus on only where things are in order to not overload myself with how they look.
  • After all of that is done, then I apply the styling to make it look nicer.

The first few times doing it is difficult and it may not always look exactly how you pictured it, but I think it quickly gets easier. Each time you hit a problem and have to research and tinker with it, you level up your CSS skills.

 
 

There are at least 2 things you can do:

100dayscss.com

and

codepen.io/challenges/

Try to do them in pure CSS until you're fluent.

When you're not sure, check MDN.

 

CSS Grid will get you most of the way to replicating the grid system in Bootstrap. The other 5% can be achieved with Flexbox.

The true value of Bootstrap besides the grid is the form styling you get, that is the more time consuming part of not using Bootstrap.

code of conduct - report abuse