Icing on the cake-multiple details help you write pages more elegantly

 

　　

 

We often use "neat", "easy to read", "friendly", "Easy to maintain", and "high reusability" to describe the code written by some outstanding developers. Now, there is a more fashionable word "Elegance" for the praise of the Code. Does it sound very friendly?

Pages are the performance of Internet products. They not only focus on appearance, but also respond to the needs of rapidly updated Internet products. To become a good developer, experience accumulation is essential, and some experiences are summarized in the details of the work process. The following sections describe various details in the page development process. We hope that the discussion of these details will help page developers to do better and write pages in a more elegant manner.

　Start with Photoshop

From the UI design draft to the static page, it is generally called a "cut graph ". This word is easily reminiscent of the "slicing tool" in Photoshop, but currently there are not many slicing tools used, most of the visual elements needed on the page, you must splice them into one or more independent images.

　　Separation and combination of visual elements

The need for fast updates of Internet products allows the UI Designer to prioritize the visual effect of the UI design draft, so sometimes there is no time to sort out the source file of the UI design draft. Therefore, there may be issues such as the lack of names of the layers and the confusion of groups.

How can I quickly find the layer of the visual element to be separated? In this case, we should use Photoshop's "automatic selection ". In addition, some edge shadows and highlights are generated by the layer style. When selecting these parts, you should select the actual drawing content next to them.

　　

 

In Photoshop's "mobile tool", select an "auto-select" check box during use. In addition, you can set whether to automatically select the layer or the group where the layer is located.

Splicing is performed on a new psd source file. The name should be the same as that of the final output image. Grid should be used for neat arrangement (shortcut: Ctrl + 'Switch grid display ). Neat puzzles facilitate editing by many people, and the background coordinates in css code can be located more quickly (everyone prefers regular numbers ).

　　

 

In Photoshop editing → preferences, you can set an appropriate grid size.

To facilitate subsequent editing, the original UI design draft layers should be properly retained for the source tile files (for example, text layers should be retained, and layers should not be merged to facilitate subsequent text changes), and layers should be well named and grouped. We recommend that you add two layers at the bottom: The base color layer and the mesh size description layer.

　　

 

　　

 

Background layer: by default, Photoshop shows the grid background of the transparent area (different from the "Grid" marked in the front), and the edges of the subgrid are not easy to see. With a background color filled with the entire canvas, the gridlines are easily identified. Generally, the background color can be pure white. For some UI elements with a white color, you can fill in black as the background color. The background layer only facilitates the arrangement of elements. when outputting an image, the background layer is set to invisible and then output.

Grid size description layer: blank layer, named in the format of "20*20", indicating the size of the grid used. In this way, you can quickly set the mesh size suitable for editing the source file of this puzzle when editing by multiple people.

The source files of the puzzle must be saved to the Development Directory. You can create a directory named _ psd in the images directory and save the relevant source files to the directory.

Correspondingly, temporary images (such as user portraits) that are used as image placeholder and gestures on static pages can be saved in the directory named _ temp.

Gif and png-8 pictures

Why do gif and png-8 images have a complex edge? This is because images in gif and png-8 formats use index color encoding, while in index color, there is only a fully transparent index color (used to draw a fully transparent pixel, that is, a blank point ), there is no translucent index color. However, the edge of a general visual element has a translucent pixel to form a smooth visual transition, these translucent points to retain gif and png-8, you must specify a solid color instead. This is the meaning of the complex edge option in Photoshop.

　　

 

In Photoshop, only this fully transparent index color is displayed.

You can also select "NONE" as the complex edge in Photoshop. The translucent point will be discarded and will not be retained into the output image. Because the edges do not have any pixels used for transition, such images may have obvious serrations, which in most cases do not work well.

　　

 

Click the arrow next to "Miscellaneous" and select "NONE" from the drop-down menu ".

If you select a color as the cross-border color, Photoshop will take into account the translucent pixels in the image when generating the index color table and use the appropriate index color (refer to the selected cross-border color) replace these translucent pixels. There are visual elements in gif and png-8 images with the same background color as the complex color, the best effect, so the selection of the Complex Color should refer to the background of the final element.

If there are multiple categories of backgrounds and effects cannot be guaranteed, use png-24. The png-24 here is actually basically a png-32, that is, a transparency alpha channel should be included. This is also because in Photoshop, only the setting of a checkbox is used to distinguish between png-24 and png-32.

　　

 

When transparency is checked, the png-32 is actually saved.

For IE6 that does not support png-32, output a poor png-8 or gif, to a certain extent ensure the normal appearance of IE6. This is also an embodiment of the progressive enhancement development philosophy for different browsers.

　　

 

A png-8 chart that is separately saved for IE6.

　Writing content and HTML

Before writing html, it is necessary to carefully read the UI design draft. On the one hand, clarify the components of the page and the relationships between these components. On the other hand, what DOM structure should be used to analyze the page and its components.

The DOM structure varies from person to person. At the basic level, as long as the intent of the UI design draft can be realized, it is feasible to use any DOM structure. On the Professional level, the DOM structure of the page should not only be easily recognized and read by other developers, but also facilitate collaborative development, and have good maintainability and scalability, this facilitates subsequent additions and deletions and updates.

　　Semantic or non-semantic

"Semantic" means that when writing html, select the most appropriate html Tag based on the content of the page to reflect the intent of the html Tag. For example, <p> indicates a text paragraph. If a paragraph is indeed a paragraph, you should put it in the <p> label instead of using the <div> without semantics.

Semantics is not only conducive to SEO, but more importantly, it makes the webpage content layers and structure clear and readable. Imagine if the content in the <em> tag of a page is indeed the content of emphasis (emphasis) from the context, will the page be very clean and friendly?

 

However, semantics is not absolute. The new out-of-site component (widget) of Weibo uses only limited tags instead of semantics. For example, the block element only uses <div> and the non-link Row Element only uses <cite>, the icon only uses <u>. Shows the latest version of the Group microblog component.

　　

 

Code for the title part (circled by red lines) of the new version of the Group microblog component:

　　

 

In this way, we ignore the semantics and limit the use of tags to minimize the style of the referenced site and interfere with the style of the component. <Cite> and <u> are rarely used tags. <div> they are non-semantic tags. In this way, the style written in the site css is a tag as a selector, components are rarely affected (few sites directly write reset or default styles on non-semantic tags such as <div> ).

Complete class naming

First, let's take a look at the following html code for viewing with Firebug. (Taken from the microblog topic component in development)

　　

 

Can you see anything special? That is, all html nodes have their own class names no matter how deep they are in the DOM structure.

　　Why?

First of all, it should be clear that some classes are named less, and the correct html node style can also be set through the relationship between nodes. This is also the general practice of writing html in the past, and we think this can simplify html. This is true, but now we should realize that simplified html will bring us more and more troublesome css maintenance.

Harry Roberts of CSS Wizardry briefly explains this.

Imagine a teacher trying to control a class of kids who have no names. That's how we used to write HTML>. <

It means that, just like why we give people a name, things become much easier when they are precisely named. Simply think about it and you can understand it. Simply say "Pikachu" is much simpler than saying that "little wisdom is always around. More importantly, if the node location changes, the original write Method Based on the node location is no longer correct, but the write Rule using the name does not.

Push some work to html to make css easier. Imagine that you are a class teacher. What makes it easier to express each student's name?

　　Appearance and CSS

CSS itself is easy to write, but a reasonable CSS architecture is not a simple task. To maintain the maintainability of CSS, the simplest way is to pursue the reusability of CSS and minimize the amount of CSS.

　　Write CSS comments at any time

CSS is generally less readable, so we need to write more CSS comments. The richer and more meticulous the annotation content, the better, and it is recommended to combine ASCII Art (character painting ). If you have time, you can even write a directory in a CSS file.

　　

 

For subsequent changes, you can also attach time and project-related information, which is useful in multi-person collaboration.

　　

 

Elegant CSS Selector

The elegant CSS selector not only looks friendly, but also improves the style rendering efficiency of the browser.

The CLASS is used as the selection operator without additional restrictions.

　　

 

The following method is better because non-<p> label elements are also valid, labels can be replaced at will, and style rendering is more efficient.

Avoid unnecessary inheritance relationships. Inheritance is written to avoid the style of the selector with the same name from affecting each other, but you should pay attention to the appropriate level of use.

Avoid unnecessary inheritance relationships. Inheritance is written to avoid the style of the selector with the same name from affecting each other, but you should pay attention to the appropriate level of use.

　　

 

The Browser style rendering engine parses the CSS Selector from right to left. the rightmost Selector is called the Key Selector ), each extra inheritance selector adds the matching time of the style rendering engine. In addition, if there is no additional inheritance relationship, sub-elements will have better reusability.

　　Summary

In our practical experience, what we developers follow is the result of experience accumulation, called "best practices ". By clarifying such a "best practice" concept in your mind, you can help yourself cultivate good habits and be more natural and elegant in page writing ".

We look forward to making progress together with all front-end developers!

(This article is taken from Photoshop, Firebug, Sublime text 2)

(Weibo UDC original blog post, reposted, please indicate the source