4 tips to writing better code
The CSS edition
Software engineering is not just about mastering all the coding languages. You don't have to catch 'em all, this isn't Pokemon! As a software engineer or software developer, your goal is to write good code. Good code can be judged very easily by developers of any skill level. If the code is easy to understand and easy to change then definitely it is good code!
Cascading Style Sheets, common referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs, variations in display for different devices, and screen sizes as well as a variety of other effects.
Here are 4 tips to writing better CSS:
1. Write structured HTML:
Well structured HTML document is the starting path to writing 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 ‘ 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. Here are two to choose from:
3. Learn about CSS Best Practices:
CSS is not to be taken for granted. You can learn all the fancy Javascript you want, but CSS is your bread and butter to making beautiful websites. It is Powerful and has many nuances that propel our designs.
4. Use developer tools:
Developer tools 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),