How to write elegant CSS code?

How to write elegant CSS code?

　　For the same project or a Web page, although eventually every front-end development engineer can achieve the same effect, the code they write must be different. Some elegant, seemingly orderly, clear and easy to understand, such code is conducive to teamwork and later maintenance, and some confusion, although the expression of the final effect, but it is obscure, it is clear that the team members in reading such code when it seems impossible, more detrimental to the maintenance of the later. So how do you write elegant code? Below I will be a very small project on the following aspects of the simple expression of their own views, if there is something wrong, hope to criticize.

• How to organize a project.
• How to write clear and understandable HTML code.
• How to write elegant CSS code (emphasis).
• How to write a canonical JavaScript code.

The first part: How to organize a project.

　　When we take over a small project of a confession wall, how do we sort it out? is to put all the HTML files, CSS files, JS files and pictures, and so on clutter together? Well, let's see what it's like.

Maybe you'll think it's nothing? The file can be found, but you try to open it in the sublime editor to see what the effect is:

　did you find it confusing?! also, what if the project is bigger? Do you need more HTML files, CSS files, JS files, and pictures? Can you make sure that you find every file you want and edit it smoothly? Clearly, obviously, no. So for this kind of project, my suggestion is that you can categorize different file types, put the same type of files in a folder, and then put all the files in a folder, as shown in:

　　

In this way, opening the above file in the sublime text editor will also become clearer as follows:

In this way, we can easily find, edit, maintain our code! Of course, for different projects, how to structure and collation is different, we should specific problem specific analysis, here is just a description of the general small project can follow the practice.

Part Two: How to write clear and understandable HTML code

HTML specification, I in the blog "HMTL Code Specification" did a detailed introduction, we are interested to see. Here we briefly review the specification and describe in my opinion a holistic approach to writing HTML code.

1. When writing HTML, the most basic overall structure is indispensable, including <! DOCTYPE html>

The code structure and visual order of 2.HMTL are basically consistent, that is, the HMTL structure is written in the visual order from left to right from top to bottom. My suggestion is: you can first according to the visual manuscript, from the big picture, the main parts of the written out, such as the header part, main part, side part, footer part, that is, the entire structure first, and then one by one to fill in the contents of the internal, Instead of the first part of the header and then write the main section, the main part of the complete writing side part of ... Because the idea of the former will be clearer.

3. The structure layer (structural layer), the presentation layer (behavior layer), the behavior layer (presentation layer) are separated, avoiding the inline, that is, using script to introduce the JS file (note: The browser rendering page is top-down, JS files are sometimes introduced in </body> before, and sometimes in the head, this part can be seen in my blog "Explore Mobile development", using link to introduce CSS files.

4. Maintain a good tree structure, that is, each block-level element has a different line, using the tab indent (relative to the parent element). If not block-level elements, such as <a><span>, write them in one line.

5. You can use blank lines between different sections (such as header, Main, footer), and do not use extra empty lines within a module, which in fact follows the principle of intimacy in design. (recommended front-end engineers can see the "write to everyone read the design book", Very Good)

6. In the HTML code you think it may not be very good to understand the place to annotate such as:<!--some comments---.

The third part: How to write elegant CSS code.

　　

　　

　　

　　

How do I write elegant CSS code?