DEV Community

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

Collapse
 
ryansmith profile image
Ryan Smith • Edited

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.