How should CSS being setup (Part 2)

Previously, we have published a CSS setup guideline, which is available here.

So, as promised, here is the part 2. Let’s continue!!

1. Concatenate and minify your CSS files in production environment.
   Do you know CSS files could actually be concatenated and minified? After doing this, the file request time and files sizes could be greatly reduced.
   Let’s say you have 8 CSS files for your website, every time any browser visit your website it has to make 8 requests just for the CSS files, if you can concatenate all 8 CSS files into a single CSS files, then you could save the browser request number and time. Similarly, if you could minify your CSS file (i.e. remove the whitespace and line break, some website even remove the comment inside the CSS file, this could reduce a bit of the file size, which is better for website loading speed as well as your SEO.
   BUT!!!! Please be reminded, do not delete your original CSS files, they are totally fine and better for your on going development, just do this in the production stage.
   You may actually checkout some tools that could help you to do this automatically, e.g. Grunt and Webpack. Sometimes the packages will be changed to a new name, but it is not hard to find the updated packages.
2. Put all your CSS selector with similar style together?
   When you coding CSS code, sometimes you will encounter below situation. Let’s say you have this code, please look into the CSS section.
   In line 20 and 24, you see actually .news-title & .news-detail share same color, should you actually separate the color style as another selector combination or keep it as is?
   In my opinion both of them have their pros and cons. If you choose to separate them, it will greatly reduce the file size of your CSS file if you have a lot of similar situation, and which is actually good. But it will also make you, or the person who will handle this project, harder to refactor the code in the future if your separation is too complex.
   So, what is the conclusion? I think there is no right or wrong for this situation, both method is valid. But if you ask me to pick one, I will go for keep it as is, since it could be much easier for future me or another developer to handle this project if it getting more and more complex.
3. Using shorthand?
   I am not a big fan of using CSS shorthand, since it could generate some problems that you could not see when you first using it.
   Let’s take background as an example, you could see that it could cater many different kind of situation, it seems very convenient and save a lot of code. But the problem is that it could go very complex and hard to maintain. It could take a lot of time for a normal person to modify it easily and I always think if there are more than 1 way to achieve the same result, you should always use the easier and simple way instead of the fancy way, so I would rather input a few more line of code.
4. Use transform instead of left or right in animation.
   Many people will use left and right to move element use CSS to create animation, but this a bad way to do so. Since using left right to create animation put a hard workload on the browser, which make the animation does not look smooth and may even affect the scrolling smoothness. So what should you use? It is transform: translate. Here is a good article for your reference.
5. Use a CSS reset.
   Different browser generate display a website with the same code differently, which is actually due to browsers are developed by different company, and there was no rules to force companies to develop browser to generate identical looking.
   Below is an example.

Firefox will not add margin top to h1 but will add margin bottom

Chrome will add margin top and margin bottom to h1

From this example, you could notice that the h1 handling between Firefox and Chrome are different. If you dig into it, you could find much more differences.

So after the problem, here is the solution — — — — CSS reset come to your rescue!

CSS reset is a technique to solve the differences between browsers. It is actually a normally CSS. There are a few kinds of CSS reset available for you to use. And the most widely used one is named as normalize.css.

There are just 300 something lines of code inside the file, and many lines are comment! Quite handy right?

You could checkout the code through this link.

This little file could save you a lot of work for syncing issues between different browser, you may want to include it inside in your every project.