Set a common style for all browser elements: Normalize.css

Source: Internet
Author: User

Resetting the default style using Normalize.css

CSS reset helps to create a datum style based on the styles of all settings. The style reset effectively overrides the default style of some of the browser's elements (which differ greatly in the browser).

Although CSS resets has been very popular in the past few years, many websites have not been used so far, and the extensibility of CSS is very difficult for CSS resets.

Most people recommend using NORMALIZE.CSS to reset the default style instead of using the very popular CSS reset written by Eric Meyer or the reset that you write yourself. Instead of resetting the basic style of these elements, normalize.css sets a common style for all browser elements. You can refer to the NORMLIZE.CSS project on GitHub, which has the following advantages, not just CSS style reset:

    • Unlike other CSS Resets,normalize.css save useful default settings

    • Large-scale specification of HTML element styles

    • Corrected some bugs and different forms of expression between browsers

    • Improved usability with careful improvement

    • Use detailed annotations to explain the role of the Code

Using NORMALIZE.CSS instead of a standard reset will allow you to write the correct code and save a lot of time when you reset the basic style.

Using less to generate CSS

In complex applications, it would be a pain to write CSS, a lot of class prefixes, duplicate styles that need to be copied back and forth, and so on. For better extensibility, it is recommended to introduce less or sass in the project. This represents the following:

    • Support variables and simple operations

    • Support for CSS fragment reuse

    • CLASS/ID Style Nesting

Wait for something more like a programming language feature. This is very effective for improving development efficiency.

Take less, for example, to briefly describe how the lower is applied to this project under Windows:

    1. Download Nodejs and install it, Nodejs will automatically add itself to the system path.

    2. Run in cmdnpm install -g less

    3. You can then compile the less source file into CSS with the LESSC directivelessc avnpc.less avnpc.css

    4. If you do not use Nodejs as the backend, it is best to use watch mode when you write less, and each save is automatically compiled into CSS. Here you need to install an auxiliary module recess: npm install -g recess then run watchrecess avnpc.less:avnpc.css --watch

More less using instructional articles can be found in the following two articles:

Less introduction and its difference from sass

Initial knowledge of less

The

Sets a common style for all browser elements: Normalize.css

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.