6 Tips to Write Better CSS For Beginners

My experience with CSS first started when I was trying to style my very first non-functional ugly-looking login page. Since then, I learned a lot about writing functional well-organized CSS code. All web-developers need to be good at HTML/CSS, but they don't have to be experts.

Here are some of my ideas that will get you and going with writing good CSS.

Before we get started, shout out to Microverse For giving me the chance to go deep on things that I took my knowledge on for granted, like how to write good CSS.

1. Write well-structured HTML:

A well-structured HTML document is your doorway to write good CSS.

The most common problem that programmers face when writing CSS is that they don't have a well-structured HTML document and therefore have issues with positioning and styling elements. 

Here is a W3scooles HTML style guide that should get you up and running and, Here is an article by Fahreyad Hossain on HTML Best Practices. 

2. Use Reset CSS:

Reset CSS is a short set of CSS rules that resets the styling of HTML elements to a baseline, removing the browser's default ' User-Agent ' CSS stylesheet. This way you won't have to worry about the default stored attributes when starting to style your website.

There are a lot of Reset CSS stylesheets out there like the one from CssReset.com or the one from meyerweb.com. But, I would recommend that you create your own by making a template stylesheet that groups all the HTML tags that you use.

You can also copy one of the stylesheets that I mentioned and delete all the HTML tags that you don't use.

3- Learn about CSS Best Practices:

While CSS is a language that we sometimes take for granted, it is Powerful and has many nuances that can help (or hurt) our designs. Here are 30 CSS Best Practices for Beginners that will keep you writing solid CSS and avoiding some costly mistakes.

4. Use developer tools:

Developer tools or Devtools for short are A set of tools that exist in every browser that You can use to edit your code on the fly and see the changes immediately without needing to change the code on your local files. To open dev tools, Press CTRL+SHIFT+C (for Windows) and OPTION+SHIFT+C (for iOS) on your keyboard if you are using Google Chrome or Mozilla firefox. If you are using Safari CTRL+SHIFT+C (for Windows) or CTRL+OPTION+C (for iOS), 

You will open DevTools in the Elements panel. Then hover over the element to highlight it.

5. Take a look at Sass:

If you are new to design (just like me) you might have heard about Sass but you might not be up to speed with exactly what Sass is, in short Sass is a CSS preprocessor, which adds special features such as variables, nested rules, and mixins to regular CSS.

For more information, you should check out this Awesome article by Tammy Coron on how to use Sass, and if you like video demonstrations you should check out this video by devED 

6. VSCODE Extensions:

Last but not least, if you use VScode you should be familiar with vscode extensions, here are the most useful extensions that I use in my projects:

1. Live server: this extension launches a live server that reloads automatically whenever you make a change to any of your files.
2. Live Sass compiler: this is the easiest way to get started with using Sass.
3. Auto rename Tag: Auto rename paired HTML tags.
4. Path Intellisense: A plugin that autocompletes fils names.
5. stylelint: this extension highlights CSS/SCSS/Less Linters.
6. Sass Intellisense: Advanced autocompletion and refactoring for SCSS.

With these awesome tips and tools, you are going to write clean CSS code, and when combining them, you are going to find that you end up writing less CSS code.

Let me know if you have any comments or anything to add you are welcome to tell me in the comments.