A bit about CSS from the programmer's perspective

For front-end web development, it is inevitable to deploy and beautify the web pages. Do you have to worry about Div and CSS? Labels, attributes, and styles, I never wanted to deal with static page designers, but it turned into a terrible nightmare, and again. When I am angry with my part-time design and modify the spam code, I swear in my heart how I can avoid this situation from happening again. Can those styles be more elegant? I have read a large article some time ago. Indeed, all the artists are living in Utopia! If the artist does not know some technical implementation and business processes, to be honest, it is difficult to work with developers! Let's briefly describe your views.

1. Do not repeat it and make your CSS elegant
For layout design, the overall layout is very important. It is necessary to abstract the elements that must be used multiple times. In general, Div and UL and Li are combined with the interface design diagram to abstract their commonalities, such as border, padding, white-space, and font-size. Minimize the amount of CSS Code. For example, if the global padding: 0px, do not add this to a specific tag. A non-repetitive design not only has a small amount of code, but also features elegance and cleanliness. It also features easy maintenance and changes.

2. restrict global forces and clarify management scope
The first clause is to encourage global solutions to the redundant design of each class and label. But is it really elegant? What are the elegant standards? At least there should be no "security risks. What is "security hazards"? I am deeply aware of the importance of my responsibilities after an experience. Once used globally, it will take effect on all the tags on the page. Is it too powerful to do so. That experience was an article publishing interface, using an editor that can generate various styles and directly support the word pasting function (FCKeditor ), CSS has many global style definitions such as P, span, and Div. For example, the p tag, the designer's original intention is to make the style of the article title, with a large green font, the code generated by the result Editor contains the P tag (if you paste the P tag directly from the word, more junk styles are generated ), then there is a spectacular green font scene in the content of the article.
Obviously, it is far from enough to follow the first rule. It is advantageous for the whole situation, but the power is not too great. Of course, it is best to use it together. In fact, it is very easy to combine. If you specify the region where all Li uses a certain style, you only need to use # Region ID Li {...} in this way, Li outside the region will not be affected. The principle of using this method is that you clearly know all possible labels in the region and the styles attached to them. After each region is completed, if each region has commonalities, the commonalities are extracted as a global condition. This solves the "security risks" and becomes more elegant. Of course, the root cause for thinking about the disasters brought about by the editor mentioned above is that, without knowing what labels and styles the editor will generate, the editor uses the Global Architecture rashly, virtually expands the global power, allowing it to "beyond authority" to manage regions and labels that violate the intention. This situation can be avoided if this principle is taken into account.

3. Add dynamic business logic thinking to the design
I asked the artist to design a grid-embedded HTML code style and sent it to me for a good result. However, when I was preparing to directly integrate Data embedding, it was troublesome. Why are all styles identified by IDs? What does grid mean? Isn't it just about outputting duplicate styles but different contents on the page. If ID is used, wouldn't I output ten records on one page, and ten identical IDs will appear on the page? Who is wrong? Developers say they want a cool style. Your designers are really cool and neat. But when it comes to integration, there is still a problem. From the programmer's perspective, I hope the designers have a dynamic consciousness. Similar situations also include the effect that the designer should move the mouse over the design style, click the mouse, and so on. The height of the area where the content number is located should not be exhausted (it is better to adaptive it ), when the content exceeds the limit, how can this problem be solved.

4. Cross-resolution and cross-browser
These two points should be an inspection step before the designer submits the work. Cross-resolution means to use percentages to process the width as much as possible. One benefit of percentages is that you can easily adapt to this change when changing the width of the outermost element without modifying the width of each label. Cross-resolution can also identify "false Center" situations that rely on margin-left: ** PX. Cross-browser is a tiring job and requires continuous testing. Many CSS application skills are involved, which are not listed here, it must be specified as a hard requirement. Pay special attention to the differences in the definitions of padding and other labels in various browsers. Sometimes, when padding is 1px or 2px, there are differences between different browsers. The designers did not see them, it is indeed a bit depressing when development is discovered.

5. More friendly coupling with developers
The designers have already done well in front of them. But it can also be better. Speaking of coupling with developers, this means that developers do not need to worry about and understand those CSS, but only need to manipulate and present data to complete the business process. In the past, there was an artist who was very comfortable working with him. He would often add a prompt on the designed page, such as "Here is the news, it can only accommodate up to 50 characters, developers can understand what to do at a glance. However, I have never enjoyed it since then. This is a kind of realm that developers expect.

I am not an artist (here, the artist refers to page layout and Style Design). The above discussion is inevitable superficial and amateur. More representatives of Web Front-end developers are just a bit of voices.