Recently, I saw this sentence in the group: "After the frontend and backend are all done, you will be better at writing pages. Some people who do not know the backend are not familiar with writing pages, and it is hard to call them cyclically ", then someone immediately connected to the next sentence, "after the front-end and design are done, you will be better at designing the page, and some people who do not understand the front-end will not be able to cut the page ".
Two jokes are also true in website development.
Recently, I also encountered this problem when working on projects. Every self-written independent HTML page seems to be okay, and there will always be style issues during backend calls, in particular, when submitting a form, the form is originally divided into different HTML files and the result is in the backend. You need to put these forms in the same file, because the class names surrounded by the outer form are different, style loss and overwrite may occur. As a result, the class name becomes more and more strange and longer. This is obviously a poor development model. It is also due to lack of overall planning and lack of experience before the project starts.
This is the issue of reuse that needs to be considered when the front-end creates a page. The structure of a page is divided, and the style analysis of each module must be added with a class to control the style; the level to which the style control should be implemented. In this way, will the style be difficult to modify in the future, whether the style can be used elsewhere, and whether the style can be used in general, but it is partially different. If you want to modify it, how should you change it? Will there be situations where the previously set selector is too detailed and subsequent modifications will not work.
To improve the reusability of pages, I feel that it is not advisable to select a method based on parent-level elements when writing styles. This will cause more and more nested Divs, the finer the style selection, the less difficult it is to change, the larger the CSS file. A better way is to analyze the project structure and classify modules into abstract processes.
You can write a set of CSS that can adapt to different design schemes like Zhang xinxu's quicklayout. You just need to write a number of detailed class names on each specific element of the HTML file, the advantage is that the CSS file is much smaller, but the HTML may be added. There are advantages and disadvantages in everything. Of course, the increase and decrease of the code file in the project is not so fancy. After all, it is not Google. Baidu is a website with a large number of users.
There are many other front-end tasks. As a front-end, you cannot just learn the front-end. The road is long, and it's better for a teenager to pass my shadow and Body separation skills?
-- Below are some fragmented things ----
Do not separate General website things: that is to say, do not define the style of this things by writing many class names. The reason is obvious. When you want to change the style, because many websites have applied it, you need to modify it in a large number of HTML files. I can only give you a smile if there are hundreds of pages on e-commerce websites.
Use a selector at a layer to define a general mode, and add a fragmented general class to achieve different effects. The "Approximate" level is determined by the project.
If you can reference other classes in the braces {} of the class in the CSS file;
If the priority can be defined in the braces {} of the class in the CSS file (all other conflicting styles are invalid. Only the style is recognized: overwrite other styles, involving the priority of the CSS selector ), it's time to study it.
Design, front-end and back-end