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

We often use "neat", "easy to read", "cordial", "easy to maintain", "forte" to describe some good developers write code. Now, there is a more fashionable word for the code "elegant", does it sound like a very cordial?

The page is the performance level of the Internet product, not only emphasizes the appearance, but also should respond to the update fast Internet product demand. To be a good developer, experience accumulation is essential, and part of the experience is summed up in the details of the work process. Described below is the details of the page development process in many aspects, I hope that the details of the discussion, can help you page developers to do a better job to more elegant posture to write the page.

starts with Photoshop

From a UI design to a static page, it is generally called a "cut diagram." The word is easily reminiscent of the "slicing tool" in Photoshop, but now the slicing tool is not used much, and most of the visual elements that are needed on the page need to be flattened into one or more separate pictures.

Separation and flattening of visual elements

Fast-Updated Internet product requirements Enable UI designers to prioritize the visual effects of UI design drafts, and therefore sometimes have no time to organize UI design manuscripts. So, to get the UI design at hand, there may be problems with layers missing naming, grouping clutter, and so on.

How can I quickly find the layer that contains the visual elements that need to be detached? This is where you should use the "automatic selection" of Photoshop. Also note that some edge shadows and high light are generated by layer styles, and you should select the actual drawing content next to them when you select those parts.

Photoshop's Move tool, which is used to check the "Auto select" checkbox. You can also set whether to automatically select a layer or the grouping where the layer resides.

Flattening is done on a newly created PSD source file, which should be named the same as the last picture that was exported. When flattening, you should use the grid to make neat arrangements (shortcut CTRL + ' toggle grid display). Neat puzzle is not only convenient for many people to edit, and the CSS code in the background coordinate positioning will be faster (who like the regular number).

You can set the appropriate grid size in Photoshop's edit → preferences.

For the convenience of subsequent edits, the puzzle source file should retain the original UI design layer (such as retaining the text layer, do not do layer merging, convenient text changes), and do a good job of layer naming and grouping. In addition, it is recommended to add 2 layers at the bottom: the background layer and the grid dimension description layer.

Background layer: The edge of the subnet is not easily visible in Photoshop, which defaults to the transparent area's grid background (unlike the "grid" of the previous size identification). And with a full canvas background, the grid line is easy to identify. Background generally with pure white, for some of the color of the UI elements, you can fill the black as the background. The background layer is just convenient to arrange the elements, in the output picture, the background layer is set to invisible and then output.

Grid Dimension Description Layer: Blank layer, with the name "20x20" in this format, indicating the size of the grid used. In this way, many people edit, you can easily set the right to edit this puzzle source files of the grid size.

Puzzle source files must be saved to the development directory, you can in the images directory, a separate directory named _PSD, and then the relevant puzzle source files are saved in this directory.

In a static page, a temporary picture (such as a user avatar) used as a placeholder and schematic for a picture can be saved in a directory named _temp.

The miscellaneous edges of GIF and png-8 pictures

Why do pictures in GIF and png-8 format have miscellaneous edges? This is because pictures in GIF and png-8 format use indexed color encoding, and in indexed colors there is only a fully transparent indexed color (used to draw fully transparent pixels, or blank points), without semitransparent index colors. However, the edges of the general visual elements have translucent pixel points to form a visual smooth transition, these translucent points to retain to GIF and png-8, you must specify a solid color substitution. This is the meaning of the miscellaneous edge option in Photoshop.

This color table in Photoshop can be seen with only this fully transparent indexed color.

In Photoshop, you can also select the matte as "none", when the semitransparent point is discarded and is no longer retained in the output image. Because the edges are missing pixels that are used as transitions, such images can have significant sawtooth and, in most cases, are not effective.

Click on the small arrow next to the "Miscellaneous edge" and select "None" in the Drop-down menu.

If you select a color as a matte, Photoshop takes the translucent pixel in the image into account when it generates the indexed color table and replaces the semitransparent pixels with the appropriate indexed color (reference to the selected matte). There are the visual elements in the colored GIF and png-8 graphs, which are in the same background color as the matte color, the effect is the best, so the selection of the edge color should refer to the background of the final element.

Use png-24 If you have multiple categories of backgrounds that do not guarantee an effect. The png-24 are essentially png-32, which should contain the transparency alpha channel. This is also because in Photoshop, only a check box is used to differentiate between png-24 and png-32.

After the "transparency" is checked, the png-32 is actually saved.

For IE6 that do not support png-32, output a png-8 or GIF that is less effective to a certain extent to ensure the normal appearance of IE6. This is also for the different browsers "progressive enhancement" development idea embodiment.

A png-8 diagram saved separately for IE6.

writing content and HTML

Before you write HTML, it is necessary to read the UI design carefully. On the one hand, clarify the various components of the page and the links between these components. On the other hand, analyze how the page and page components should be implemented with the DOM structure.

The DOM structure of the page varies from person to person. On a basic level, it is possible to use any DOM structure as long as it is possible to implement the intent of the UI design manuscript. And from a professional level, the page's DOM structure is not only easy to identify and read other developers, facilitate collaborative development, but also to have a good maintainability and scalability, facilitate subsequent additions and deletions and updates.

Semantic or non-semantic
"Semantic" means that when writing HTML, according to the content of the page, choose the most appropriate HTML tags to reflect the original HTML tags. As

Represents a paragraph of text, so if a piece of text is really a paragraph, then you should put it in the

tags instead of using no semantics

。

semantics, not only conducive to SEO, but also more important is to make the content of the Web page level and structure clear, very user-friendly in readability. Just imagine, if the content of a page's label, from the context is really the content of emphasis (emphasis), will it feel that this page is very neat and friendly?


But semantics is not absolute. Weibo's new outbound component (widget), does not conform to semantics, uses only qualified tags, such as block elements using only

, non-linked inline elements are used only, and icons are used only. The latest new group microblogging component, as shown in the following figure.

The code for the title portion of the new collective microblogging component (the red circle):

This ignores semantics and limits the use of tags in order to minimize the style of the site referenced by the component and interfere with the style of the component itself. and are rarely used in labels,

It is also a non semantic label, so that the style that is written in the site CSS as a selector will rarely affect the component (not many sites will directly

such as non-semantic tags write reset or default style).

Complete class naming

Let's take a look at the following HTML code using Firebug. (from the development of the Micro-blog topic components)

Can you see the special place? Yes, all HTML nodes, regardless of how deep the DOM structure is, have their own class names.
Why would you do that?

First of all, need to be clear, less class naming, through the relationship between the nodes, of course, you can also implement the correct HTML node settings style. That's what we used to do with HTML, and we thought it would streamline HTML. This is true, but now we should realize that streamlined HTML will bring us more and more troublesome CSS maintenance.

The CSS wizardry Harry Roberts makes a simple explanation.

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

It means that, just as we give names to people, things become much easier when things are named precisely. A little thought can be understood, directly to say "Pikachu" than to say "little wisdom has been brought around the magic Baby" to be much simpler. More importantly, if the location of the node has changed, the original based on the location of the writing is no longer correct, but the use of the name of the method does not exist this problem.

Push some of the work to HTML to make CSS easier. Imagine oneself is a class teacher, what will be more convenient than each classmate's name to express each classmate?

appearance and CSS

CSS itself is easy to write, but a reasonable CSS architecture is not a simple matter. To maintain the maintainability of the CSS, the simplest way is to pursue the reuse of CSS, as much as possible to reduce the amount of CSS.

Write CSS annotations at any time
CSS is generally less readable, so we need to write CSS annotations. The richer and finer the annotation content, and the idea of combining ASCII art (character painting). If you have time, you can even write a directory in a CSS file.

If you are adding changes later, you can also attach time and project-related information, which is useful in many people collaboration.

Elegant CSS Selector

Elegant CSS selectors not only look friendly, but also enhance the browser's style rendering efficiency.
Use class names (classes) primarily as selectors, without additional qualification.

The next one is better because it's not

Tag 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 interaction of the style of the same named selector, but it is appropriate to be careful in the use of the hierarchy.

The browser style rendering engine parses the CSS selector in a right-to-left order, with the rightmost selector called the key Selector, and each additional inheritance selector increases the search-matching time for the style-rendering engine. Furthermore, child elements can be more reusable if there are no additional inheritance relationships.

Summary

In the actual experience, we developers follow, mainly in the experience of the accumulation of results, called "Best practice." In the heart of such a "best practice" concept, can help themselves to cultivate good habits, in the page to write more natural, more "elegant."
Look forward to working with you front-end developers common progress!

(screenshot taken from photoshop,firebug,sublime text 2)

(Weibo UDC original blog, reproduced please indicate the source, welcome to subscribe)