Front-end engineers: Top 10 CSS skills

The CSS skills summarized here are of great help to front-end engineers. Although these skills are basic, if you or your team are not familiar with them or are not started to use them yet, you can refer to the content described in the following article.

1. Use firebug or console for debugging 

When Firefox has not launched Developer Tools, you must use Firebug for debugging. In 2006, the first version of Firebug release was released, allowing web developers to quickly learn about website debugging, you can also learn about the website's performance through Firebug. However, Firefox has released its own Developer Tools, and Chrome also has many useful skills and powerful Workspace. If you are not familiar with the Workspace, refer to the original article: coding on workspace of Chrome Developer tools.

2. Float or Inline-Block css 
Let's take a look at Example 1. There are three columns in the middle, which are arranged in the float: left mode:
Css code

1. <Div class = "wrapper">
2. <Div class = "column"> test </div>
3. <Div class = "column"> test </div>
4. <Div class = "column"> test </div>
5. </Div>

CSS syntax:
Css code

1. . Wrapper {
2. Width: 400px;
3. Min-height: 50px;
4. Background-color: red;
5. }
7. . Column {
8. Float: left;
9. Width: 100px;
10. Height: 100px;
11. Background-color: blue;
12. Margin-left: 20px;
13. }

The background is red. the wrapper block is halved because clear: both is not used. For the correct solution, see Example 2. If this solution is not used, replace float with display: inline-block, for the solution, see Example 3. The above two solutions are the most common. The ultimate solution can solve this problem through pseudo-class: after.

3. Replace Javascript with CSS animation 

The author of the original article wrote a CSS3 Transitions to replace ace JavaScript animations article to tell the front-end engineers to replace the original jQuery animation with CSS as much as possible, the reason is that the performance of CSS animation is much higher than that of JavaScript Native Language, please refer to http://www.cssanimate.com/website.

4. Use Label input for Form 
In the above example, you can click Name or Email to find that the browser cursor will naturally move to the text input field. The setting method is very simple. You just need to set the label for attribute to the input id:
Css code

1. <Label for = "username"> Name: </label> <input type = "text" id = "username"/>
2. <Label for = "email"> Email: </label> <input type = "text" id = "email"/>

5. Performance: Spiriting everything 

Each website will certainly have many small icon diagrams, whether directly used in html or written in CSS, if 10 icons are set up during network transmission, however, css_spite solves this problem. It forms a large image of all the small atlas and uses css settings to reduce the number of network connections. Many tools on the network can achieve this goal, such as CSS Sprite Generator, if you are familiar with the Compass tool, you can directly use the Spriting with Compass:
Css code

1. . My-icons-sprite,
2. . My-icons-delete,
3. . My-icons-edit,
4. . My-icons-new,
5. . My-icons-save {background: url ('/images/my-icons-s34fe0604ab.png') no-repeat ;}
7. . My-icons-delete {background-position: 0 0 ;}
8. . My-icons-edit {background-position: 0-32px ;}
9. . My-icons-new {background-position: 0-64px ;}
10. . My-icons-save {background-position: 0-96px ;}

6. Do not directly modify the image width and height attributes. 

This is actually very important. Now, more than 80% of the bottlenecks in the website architecture are reading image files. Sometimes the UI Designer Splits a large image and the front-end engineers use it, as a result, the image file is very large, and the engineer directly modifies the image size through css width height. This seems to be okay, but the website starts to be very slow and the user starts to get upset, naturally, no one will continue to use the website. The correct method is to resize the image into various versions. for details, refer to this tool for image optimization:

• Produce multi-resolution images: grunt-responsive-images
• Clowncar skills: grunt-clowncar

7. Use max width and height to adjust the image ratio 

This is actually quite useful. Let's take a look at the example:
We can see that the original ratio of this image is 228 in width and 320 in height.
Css code

1. Img {
2. Width: 228px;
3. Height: 228px;
4. }

The image becomes the example above, but if we change CSS to the following:
Css code

1. Img {
2. Max-width: 228px;
3. Max-height: 228px;
4. }

The result is:
  8. Make good use of: before AND: after 
Add an element clear: both after float: left. Now we can solve this problem through: after (example address ):
Css code

1. . Wrapper: after {
2. Content :'';
3. Clear: both;
4. Display: block;
5. }

9. Reduce CSS program code 

This part is to reduce unnecessary program code
Css code

1. . Class {
2. Margin-top: 5px;
3. Margin-right: 10px;
4. Margin-bottom: 15px;
5. Margin-left: 20px;
6. }

Can be written
Css code

1. . Class {
2. Margin: 5px 10px 15px 20px;
3. }

CSS color # RRGGBB can be written as # RGB

10. Use SASS or Compass 

Are SASS or Compass not used in the team? You are advised to use these two tools as soon as possible. If you are not familiar with these two tools, you are advised to view the slides below: