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.
