When lazy isn't ugly any more (HTML & CSS)

How lazy is ugly in first place

There are people out there who have enough OCD to write well ordered CSS & HTML from the beginning who will never need the tools I want to introduce to you. Unless they are working in a team with people who don't. I am definitely none of the well structured code writers.

When it comes to me and I need to add a new class or a property in CSS I will write it at the end.

When again I have to read my code my first thought is 'who wrote this crap' since I work a lot with people who have the discipline to order their code.

Since this happened all the time I decided to look for tools which can support me and my team mates by reading my code.

Pretty CSS

For my CSS (or SCSS) I am using CSSComb. With this tool I can define an order of the CSS properties which I do desire and if I run it, it will make sure the properties are sorted properly.

Pretty HTML

For my HTML files I haven't found a tool which will satisfy my needs so I wrote a npm-module myself which is class-sort. With this tool I can define an order for classes which works pretty well for my purposes. If I haven't defined an order for a group of classes, these will be ordered alphabetically after the defined ones.

Conclusion

If you want your code to be a little bit (or a lot) cleaner, you can look out for tools which will suit your needs. If there isn't any by now, why not doing it by yourself.

The biggest challenge with this tools is to find one order structure which is accepted by all your team members, since you overwrite the whole file if you use it.

This is my first article. Please be kind.