Background:

Over the last few weeks, I seem to have accrued a reputation for quality CSS design. Thanks to this reputation, a few of my classmates have begun asking me for tips on working with the language, which has led me to making this: a beginner’s guide to CSS based on what I’ve learned so far. CSS is by far my favorite thing to code so far, and I have a lot of strong opinions regarding UI design / how a site should look. That said, I am only a beginner, and there are a lot of gaps in my knowledge. The purpose of these blog posts are to share my thought processes regarding CSS design, as well as some of the tools I have learned so far. This will not be the definitive guide to the language, it is intended as more of a jumpstart for anyone looking to get a grasp of the CSS Design.

How to think about CSS:

Before I get too into the nitty gritty of how to actually use CSS, I would like to start by explaining my thought process regarding CSS.

CSS does not make sense most of the time.

Oftentimes you WILL run into situations where two different CSS properties will conflict, generally with one attribute entirely negating the other. It can be very hard to understand why these issues occur, how to fix them, and how to prevent them in the future.. Each time you run into this kind of issue, the only option you really have is to try different properties, values, and locations until your code finally looks the way you want it too. Occasionally there will be solutions online that seem to apply to your situation, but in my experience, a lot of the time those solutions won't work either. These difficulties have convinced me of this: the best way to troubleshoot CSS that I know is to try all kinds of different ‘tools’ until one manages to fix your problem. Unfortunately, the only way to make this school of thought work is to have a large ‘toolbox’.

"When all you have is a hammer, all of your problems begin to look like nails"

What I mean by having a large toolbox is this: there are many properties in CSS that seem to do largely the same thing, and all of them will have their own unique array of properties that they will and won’t get along with. By working to remember and understand these seemingly similar bits of code, whenever you run into a problem you can just swap these properties for one-another until something works. For me, this process is far more preferable than trying to keep track manually of which properties play nice. After running through all of your known ‘tools’, you can either try to expand your toolbox by learning a new trick, or you can try to restructure your code around the ‘tools’ you do have. Overtime, you are likely to get a far better feel of what things will work together, and the process will begin to pick up speed, almost like building muscle memory. Following this school of thought, your code will always eventually look how you want it too, even if it takes a little longer to get there.

As far as I am aware, there will always be a way to make your code look how you want it to.

Now CSS isn't all powerful, many of the more complicated aspects of UI design require your CSS to work closely with your HTML and JS, like using your JS to import google maps, or using your HTML to import fonts and logos. That said, CSS used properly is capable of most things you will want out of UI design. I can say this confidently because...

...almost every site on the web uses CSS, and that means most of the amazing designs you can find online are in large part thanks to CSS and its many tools. If you want to make those same kinds of amazing designs, you have to have a large repertoire of CSS ‘tools’, and the experience in how to use them.

TLDR: CSS is complicated, and trying to provide blanket solutions for any CSS problem will rarely be helpful. Instead, this guide will try to guide you through my thought process of how to make troubleshooting CSS less awful, all while sharing some of the techniques, tools, and properties I’ve learned so far.

Author's Note:

After writing that last block of text, I've realized that trying to compile all of my thoughts about CSS into one post would be a massive disservice to anyone actually trying to read it. Because of this, I will be separating my thoughts into a number of separate text posts and then linking them directly here. Hopefully this will make navigating this guide easier for y'all.

Additionally, if anyone reading through these posts has anything to add, please feel free to post it in the comments and provide any insight you may have. All coding starts with crowdsourcing knowledge from strangers, and I invite all of you to throw your lot in.

The DOM:

The DOM provides many tools that can and will help you make your CSS better, and I strongly encourage anyone looking to improve their design abilities to become familiar with it.

In this blogpost, I will guide you through the elements tab of the DOM, and how it makes coding CSS much easier:
https://dev.to/bmmcshane/css-the-dom-22ei

Naming Elements:

Despite largely occurring in your HTML, 'Naming' your code is a very important part of CSS design.

In this blogpost I go in depth about where and how to apply ClassNames/IDs, as well where to just apply properties straight to your HTML elements:
https://dev.to/bmmcshane/css-naming-elements-4c8p

CSS Frameworks and Extensions:

As one of the most broadly employed coding languages, CSS has a number of different frameworks and extensions that change how you use CSS or expand upon its capabilities. These tools are separate from my previous metaphor about toolboxes, these frameworks and extensions are actual code you can install on a project that make coding CSS generally easier. Even though my experience with these tools is limited, I still think it's an important topic to broach.

In this blogpost I go more in depth about CSS frameworks/extensions and how you might employ them:
https://dev.to/bmmcshane/css-tools-1lp5

Clear Design:

On bigger projects, CSS can quickly become very hard to read, especially depending on often how you apply ClassNames and IDs.

In this blogpost I go over a few tips and tricks I've started using to make my CSS more readable, as well as some theory that can help separate your code into more manageable chunks:
https://dev.to/bmmcshane/css-clear-design-fbd

Flexible Design:

One of the biggest hurdles in CSS design is making your code fit whatever screen it occupies. Getting this right can be pretty difficult, but it's a very important aspect of CSS design, especially if you actually intend to use the site you are making.

In this blogpost, I share what I've learned so far about making flexible design:
https://dev.to/bmmcshane/css-flexible-design-4lj5

My Toolbox:

Finally, this blogpost is where I will be talking about the individual tools/properties that I have come to understand, and I'll be sharing them with you all, lest you have to struggle in the same ways I had to:
https://dev.to/bmmcshane/css-my-toolbox-34eb

Footnote:

That's just about everything I have for you all right now. Again, if you have anything to add, feel free to add it in the comments, or you can try and get in contact with me directly about whatever it is. Additionally, feel free to ask me any questions you might have. I can't guarantee a solution, but I can certainly try to point you in the right direction.

With that said, thanks all for reading my blog!