CSS specifications and css naming rules

CSS specifications and css naming rules

Abbreviation

The abbreviation can reduce the CSS file size and increase readability and maintainability.

But not all values must be abbreviated, because when an attribute is abbreviated, all items are always set, and sometimes we do not want to set some items in the value.

/* For example, we use the following style to center a specified width container horizontally. All we need is left and right, * top and bottom are not important to this style (if they are set, they will affect the use of other styles in this container). * therefore, we do not need to abbreviation */. f-mgha {margin-left: auto; margin-right: auto;}/* For example, in the style settings of the following module, we do need to set all padding items, so we can use the abbreviation */. m-link {padding: 6px 12px ;}

For common abbreviations, see code format.

Avoid performance consumption

The attributes listed below may cause rendering performance problems. But sometimes the demand is greater than everything ......

/* expression */.class{width:expression(this.width>100?'100px':'auto');}/* filter */.class{filter:alpha(opacity=50);} 

Selector merge

The CSS selector combination can define multiple selectors at a time, saving you a lot of bytes and valuable time.

Generally, we combine a series of selectors with the same definitions or most of the values with the same attribute values (indeed because of correlation) (using the comma method) for unified definition.

/* The following operations are performed to clear the floating layout selector */. g-hd: after ,. g-bd: after ,. g-ft: after {display: block; visibility: hidden; clear: both; height: 0; content :". ";}. g-hd ,. g-bd ,. g-ft {zoom: 1;}/* usually the background occupies many bytes, So we usually call it in this way */. m-logo ,. m-help ,. m-list li ,. u-tab li ,. u-tab li a {background: url (.. /images/sprite.png) no-repeat 999999px 9999px ;}. m-logo {background-position: 0 0;}/* Below is the writing method of a component. Many elements are linked or related, so they are combined, easy to understand and modify */. u-tab li ,. u-tab li a {display: inline; float: left; height: 30px; line-height: 30px ;}. u-tab li {margin: 0 3px ;}. u-tab li a {padding: 0 6px ;}

Background Image optimization and merging
Image optimization:

Image Quality Requirements and Image File Size determine the format of the image you use, and use a smaller image file to present a better image quality.
When the image color is too rich and there is no transparency requirement, it is recommended to use jpg format and save it as high quality.
When the image color is too rich and transparent or translucent, or the shadow effect is required, we recommend that you use the png24 format and perform png8 degradation for IE6 (or use a filter as a last resort ).
When the image color is not rich, use the png8 format, regardless of whether it is transparent or not. This format is recommended in most cases.
When an image has an animation, it can only be in gif format.
You can use a tool to compress the image, provided that the color and transparency are not affected.

Merge multiple images:

Gaps must be retained between individual icons. The gap size is determined by the container size and display mode. The advantage of this is that both fault tolerance and maintainability of images are taken into account.
The arrangement of icons is also determined by the container size and display mode. Horizontal arrangement (container width is limited), vertical arrangement (container height is limited), diagonal line arrangement (container width and height are not limited), and left-side arrangement (container background is left), right (right of container background), horizontal center (horizontal center of container background), vertical center (vertical center of container background ).
The size of the merged image cannot exceed 50 kb. the recommended size is between 20-50 kb.
To ensure the quality of the Modified Image, keep the original PSD image, modify and add it in the PSD, and export the png image.

Classification merge:

It is best not to merge all icons into one image. In addition to controlling the image size, pay attention to the following methods.

Merge images in the same arrangement according to the image arrangement to facilitate style control.
Merge images of the same module or component according to the module or component to facilitate the maintenance of the module or component.
Merge images of the same or similar sizes Based on the image size to make full use of the image space.
Merge images of the same or similar colors based on the image color to ensure that the colors of the merged images are not rich enough to prevent color distortion.
Combine the above methods.

Hack avoidance

You can use Hack to avoid high costs. For example, if you need to add a lot of HTML or write a lot of CSS, it will not be worth the candle.
Rich practical experience can help you understand common problems and avoid them with different ideas. Therefore, experience and thinking methods are very important here.
We do not recommend that you use a method that you are not sure about to avoid Hack based on your own capabilities, because your method may have issues you have not found.

If CSS can be done, do not use JS

Let CSS do more and reduce the JS development workload.

Use CSS to control interaction or visual changes. JS only needs to change className.
You can use CSS to change the style of multiple nodes at a time to avoid multiple rendering and improve rendering efficiency.
If your product is not compatible with earlier browsers, you can hand over the animation implementation to CSS.

Easy to read and modify

If you meet all the requirements of the "CSS specification", you will naturally write a beautiful CSS that is easy to read and modify.

Of course, the code format and naming rules are relatively important.
Clear CSS Module

If you meet the naming rules, your CSS module will be clearly visible.

Note that each module is particularly important for large CSS files.
File compression

Reasonable CSS writing can reduce the file size to a large extent. After completion, try every means to compress your CSS without damaging the file content, you can use the compression tool to remove comments, extra spaces, and line breaks.

For details about the compression tool, see "HTML/CSS tool.
Other formats optimized

For the optimization method, see the code format.Http://www.cnblogs.com/LoveOrHate/p/4448833.html