Monday, November 19, 2018
Tips

Tips for a cleaner CSS code (Part II)

In the previous post, we learned some tips to have a cleaner and readable CSS code, from structure details that you can choose as you are more comfortable, to issues of nomenclature to save time. Let’s continue to see tips!

Take advantage to build your template library

When you decide the structure that you will use for your design, you can debug it and save it for later uses. Classify them according to the use, design or layout and little by little you will have a very useful library for future projects.

Use scripts (-)

Using scripts instead of underscores or underlines improves the possibility of compatibility with previous versions of browsers, remember that not all users are aware of that type of details.

Use = for your sections

Since we know that when looking for an ID we’ll not only find the title but with the same ID in other places of the code, adding a = to the title will allow you to find it quickly and you will save time.

Use a code validator

Using free tools like the free W3C CSS validator will allow you to find the errors easily.

Be careful with the divisions

Use only the divisions you need, since the more div tags you add, the more loads the structure of the page.

Separate the design layout

To improve the readability of the code, it’s preferable that you separate the design details such as colors, images, and backgrounds from the elements concerning the layout. This also allows reducing the margin of error.

Sort properties alphabetically

Sorting the properties alphabetically you can know in advance what line it may be on. Remember, everything that saves you time is profit.

Don’t skimp on the spaces

Yes, we know that each space you add increases the file size. However, using the spaces provides a cleaner list of the code between the selectors and the declarations.

Use section breaks

Dividing the sections correctly allows for better readability of your code. Using section breaks you can successfully separate them without adding too many spaces.

Moderates the use of selectors

Evaluate if it’s necessary to use a selector since keeping them to a minimum means that it will be easier to read and you will not load the file much.

Moderate the use of the tag! Important

Use! Important labels only when it is absolutely necessary since in the future, editing the style sheet will be more tedious and can take a lot of time.

Use UFT-8

The UFT-8 character code is for universal use and in the future, it can help you a lot with compatibility.

Use the em for the texts

We’ve talked about this before, the use of the em drive for the texts will make them look better in browsers. Using the em will ensure that the texts will be resized on any platform.

Use a separate ID for the anchors

The links of the anchors (anchors) usually have the same style as the links of hover values. In many cases you will want the anchors to look and act differently than regular links, so you can use separate IDs to achieve it.

Avoid using the selector *

Using the * selector makes it harder for the browser to quickly load your page and also interferes with the default style.

Add the comments you need

Add all the comments you need, even the simplest details. It does not matter if it is you or another developer who returns to that code later, you will always know what you wrote and why so each task will be easier and you will avoid a catastrophe.

Use the search tool

Many times the stress (or concentration) of writing code without errors makes us forget the fact that there is a browser search tool to find words within the code. In Chrome it is Ctrl + F and in Mac OS X it is Command + F.

Give your code title

Especially when you write CSS codes for themes or templates, it is good to write the title, the date on which the code was drawn up and the credits (your name and contact points). Who knows, maybe someone wants to share an idea with you to improve it or you can offer a resolution of doubts about it. Also, add signs on the data you add (such as the specific HTML of a color) so that whoever uses the code can copy and paste it without searching inside it.

Build a list of references

Instead of trying to remember each value and property you add, organize them in a list as you develop the code, so you only have to copy and paste or it serves as a reminder in case you make an error, you have the information to repair it.

Combine the style sheets

Use tools such as CSS Compressor online to combine style sheets and prevent HTTP requests that the browser makes to your page increase the loading time of your website.

Use an editor

Editors can make your work much easier, you can choose free or paid versions. We recommend those that show changes in real time so you can evaluate the modifications you make.

Use tools to optimize and clean your CSS

There are free tools that you can use to clean and organize your CSS:

Procssor is very good at maintaining order when several people manipulate the same CSS, organize it in the way you want.

Clean CSS embellishes, minimizes, formats or compresses CSS, HTML and JS files.

Unused CSS removes CSS rules that are not being used.

Minimize or compress your files

Minimalism is a trend, only in the design of a web page but also in its construction. Minimizing or compressing your CSS code will help improve the loading speed of your website and also saves bandwidth. Minimize a CSS file is to eliminate all unnecessary comments, points, and commas within it, reducing the size of the style sheet by 80%. Use tools such as Gzip, which achieves a 70% reduction in the stylesheet and reduces response times.

Don’t overdo the hacks

There are many CSS hacks that can help you solve specific errors and bugs. If the bug is the responsibility of a plugin, first contact the developer before adding any type of CSS to your stylesheet. In summary, don’t put too many “patches”, fix problems at the root to avoid confusion.

This was all with the tips to have a cleaner CSS code! If you have any more that you want to share, comment!

Jefferson Maldonado
the authorJefferson Maldonado
UX WordPress Designer
Ux & Web Designer. Portafolio: http://maldonadoz.com/portafolio/ Divi Blogger, WordPress Expert, UX Designer, Business Consultant.

Leave a Reply