CSS Quick Guide: 10 Best Practices for Your Stylesheet

in Uncategorized on

As a web designer, you are often required to create or modify a CSS file. However, given the developments and innovations in this language, it is often difficult to decide on the best spelling to use.

In this quick guide, I will give you tips on how to design your CSS file so that it does not affect the quality of the website you develop.

1. Insert CSS Reset

One of the biggest challenges when developing a website is compatibility between different browsers.

The CSS reset is a stylesheet that greatly reduces these incompatibility errors by providing a general but easily customizable style.

Normalize.css is a modern and precise reset based on HTML 5.

You must add the style form for this reset CSS to the <head> section before defining your styles.

2. Organize elements

To get more comfortable, you need to organize the elements in your style sheet. This means that the order must be logical.

They start with the elements of the <body>, followed by the elements of the <header>, the <nav> and the <footer>.

3. Comply with writing conventions for IDs and classes

It is important that you name your IDs and classes correctly. In particular, they must:

Be sustainable

Clear presentation of the element concerned

For example, you should avoid naming a class “title-red”, because the day the color of the title changes the class name, the element no longer represents the class.

Stay consistent with the names of your elements. For example, use the same character to separate two words: ” . secondary-nav” or ” . secondaryNav”.

4. Grouping IDs and classes of a component

If an HTML component has different IDs and classes, it is best to group them in your CSS file. If there’s a mistake, it’s easier to find it.

5. Use the hexadecimal color code

To give an element a color, you have two options:

Either you use the color name: color: green

Either use the hexadecimal code: color: #008000

However, I recommend using the hexadecimal code as it can load 4 to 5 times faster than the color name.

6. Using CSS prefixes from browsers

Every browser has many peculiarities at the level of styles.

Since the introduction of CSS3, you need to insert vendor prefixes into your CSS table so that each browser takes into account the features and styles you implement. Otherwise, you can make mistakes.

Here is the list of the most important vendor prefixes:

Chrome : -webkit-

Safari: -webkit-

iOS: -webkit-

Firefox: -moz-

Opera: -o-

7. Bring information about the stylesheet

Over time, you won’t be the only person using the CSS stylesheet you’re working on.

It is therefore important to include the following information:

The author

URL

Name of the topic, if available

A description

Keywords

If someone else is using the file, they can contact the creator for more information.

8. Insert comments and annotations

For better organization and easier finding, it is recommended to include comments and annotations in your stylesheet.

For example, comments can delimit different parts and annotations can provide details about a particular style.

In the event of an error, you can quickly reach the relevant part of your file.

9. Compress the CSS file

Your CSS file may have an impact on the loading speed of the website due to line breaks, spaces, redundant styles, etc.

For example, if you find that the load time is unusual, compress your CSS file with a CSS compressor tool.

10. Checking and validating the CSS code

To check if your stylesheet is properly structured, you can use the CSS validation service of the W3C.

By using this tool you will also detect possible errors, saving you a lot of time.