Modular CSS design (1)-icon

Preface:

Over the past six months, I have been involved in the design and front-end development of the tapd project. The reason why we take the design and front-end development together is mainly to take into account a more ideal design process. While designing the design, we take the implementation of HTML and CSS into account, in this way, whether it is design orCodeThey are all unified design concepts and styles for easy maintenance and subsequent development. Later I found that the scale of tapd is much larger than what I think. Interaction Research, visual design, and code design are a huge task, there is not much time to design and implement each page... Fortunately, the wise boss later handed over the vision and interaction design part to other colleagues, so that I could carefully study the front-end code and spend a month restructuring all HTML and CSS.

This seriesArticleI will share with you some of my experiences on CSS Architecture Design in the tapd project, such as naming and flexibility, without involving too many CSS skills.

Since there is no necessary link between the chapters, I hope you will gain some insights. M (_) m

-By Ceil 2009/5/11

Modular CSS design (1) --- icon

Generally, the icons on the page are written in the following two forms:

<A href = "#" Title = "edit"> </a>

<A href = "#" class = "btn_edit" Title = "edit"> edit </a>

The former: directly insert an image into the graph. The advantage is that the button is inline-block, which can be easily inserted anywhere on the page. For example, put it in the middle of a piece of text.

Example_01

The latter: display the icon with CSS background positioning and hide the edit text. Compared with the former, the latter reduces the coupling between performance and logic and improves the HTML semantics. However, in order to make the icon have a height and a width, <A> is usually added with the display: block, and then the icon is placed with the background-image. The disadvantage is obvious. If I need to insert an icon into a sentence, the display: block will directly display the icon with other text lines.

Example_02

Considering the advantages of both, I defined an icon in tapd as follows:

<A href = "#" class = "tag_bug"> <I> bug </I> </a>

CSS

In this way, the tapd icons not only have form flexibility, but also reduce coupling, better Seo, and better HTML semantics... Etc

(Because the display: inline-block implementation in IE6/7/8, Firefox, Safari, and chrome must be considered, an additional <I> label must be added to hide the text .)

According to Yahoo's rules for High Performance Web sites principle, the number of HTTP requests between the client and the server should be reduced.

I also use CSS sprite to assemble multiple icon images into a separate image and display different icons with background-position.

CSS Sprite

Someone may ask:

<A class = "btn_edit"> </a>

Isn't this easy to write? Can HTML and CSS code be reduced? Why <a class = "btn_edit"> <I> edit </I> </a>

In fact, I insist that writing text in tags is based on Seo. In addition, I also consider a situation where our customers suddenly think that editing Button icons is too bad! Directly use text. Then I can slightly modify the CSS file to cleverly turn the original icon into a text link. Or the customer cannot access the CSS file of tapd for some reason. If there is no text in the tag, it becomes blank and cannot be used.

Example_04

In addition, because IE6 does not support PNG images with transparent backgrounds, I use gif for most irregular icons. However, sometimes the 256 colors of GIF cannot meet the designer's design requirements (designer A: How can I use 256 colors to make my work colorful !!).

Therefore, when using CSS Sprite, I synthesized two images, a GIF image with low color requirements and transparent background, and a PNG Image with high color requirements.

From: http://blog.szu.edu.cn/Forum/57067