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.
1. Write well-structured HTML:
A well-structured HTML document is a 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.
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 ‘
stylesheet, This way you won’t have to worry about the default stored attributes when starting to style your website.
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:
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 as 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.
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:
- Live server: this extension launches a live server that reloads automatically whenever you make a change to any of your files.
- Live Sass compiler: this is the easiest way to get started with using Sass.
- Auto rename Tag: Auto rename paired HTML tags.
- Path Intellisense: A plugin that autocompletes fils names.
- stylelint: this extension highlights CSS/SCSS/Less Linters.
- Sass Intellisense: Advanced autocompletion and refactoring for SCSS.
With these awesome tips and tools, you are going to write a clean CSS code, and when combining them you are going to find that actually, 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.