When the browser opens the site, it automatically completes the style rules with default values. Different versions of different browsers have their own CSS rule values. If the developer did not specify the desired value correctly or did not describe the desired rule at all, the browser uses its own version. The idea to reset CSS when loading a site allows you to level the differences between browsers and display the desired content always and on all devices in the same way in most cases.
The essence and execution of the idea
HTML elements of the page are placed according to CSS rules. The developer is not required to specify all the rules for all elements and can use the default values. In most cases, this is an acceptable solution. If the task of identifying the web resource on different devices in different browser windows is relevant, then it is advisable to set the critical rules to the desired values.
The example shows various options for the recommended reset. CSS rules are set to zero. In fact, the idea is to indicate the meaning of critical rules, and then build the site design on a “clean” basis.
When designing a site, you can create a separate critical values installation file for all CSS rules used. Use such a "powerful" idea as "*":
- {set of values for all rules}
- not the best solution. Many style files start with just such a reset CSS option. HTML5 offers a wide range of possibilities for the formation of the structure and content of the page, therefore, when developing your own option for setting initial values, the preferred path is preferable to deciding to comb everything in bulk under one comb - “*”.
Description of page styles can be voluminous. The appropriateness of using the “*” call or a call to each specific rule, class or identifier depends on the developer.
Custom CSS setting options
On the Internet, there are many sets of recommended values of popular rules and tag lists that are subject to reset to the “zero” state:
- have competent opinions;
- theoretically sound options are offered;
- authoring works of CSS aces;
- There are many private crafts.
Downloading a typical version of the reset.css file is not a problem, but it is not always an expedient action.
On the left (1) is a set of “productive” solutions from several CSS gurus. On the right (2) is a pair of styles, which is enough to display a simple page for placing an image of an online store product. Simplicity is the key to success: simple, understandable and changeable.
There is no doubt: the knowledge and skills of colleagues are instructive and practical, but a rational decision is more productive in each particular case.
Site management systems and manual work
All popular site management systems (CMS) include style files. Some of these styles provide equivalent display of sites in various browsers on any equipment. It’s quite difficult to figure out where what is described, which rule or property is inherited or specified.
Using CMS removes the problem of how to connect reset.css and use it, but limits the developer when it is necessary to correctly and accurately influence the design of a web resource.
A custom version of the set of values and tags that are to be reset is preferable. When creating a site from scratch - this is the only reasonable option. To apply the knowledge and skills of colleagues and analytically examine each reset.css file found on the Internet is an interesting, but unpromising task.
A high-quality web resource uses a certain set of tags, minimizes their number and strives for simplicity of presentation of content. Taking a file written for Yahoo, Google or Yandex as a basis is practical, but always wiser than your own, less authoritative, more modest, but self-sufficient option.
Feasibility of CSS Reset
English terminology fits perfectly into programming, but in the context of the terms reset and CSS, the meaning of the first is not at all to reset the second - a cascading style sheet. This is not a case of restarting Windows, when it goes into itself and does not react to anything other than “Reset”.
A perfectly executed site should control not only itself, its functionality and dialogue with the visitor. The developer should consider all options for displaying the desired design in all possible browsers on all available computing platforms.
The task is impossible (browsers are constantly progressing, and devices are constantly increasing in number and functionality), but you can still do something here.
Setting the initial values of styles correctly is the real point of reset CSS. The developer organizes all the styles that he intends to use and compiles a list of tags to which the selected styles will be applied. This work is carried out in close cooperation with the development of inheritance issues and the combination of various style rules for a compact description of semantic content blocks, including semantically related elements.
Style System - Flawless Foundation
The systematization of styles is determined by the theme of the site, the task to be solved, and the experience of the developer. Other factors can have a significant impact on the actual product.
The logic of the reset CSS idea is the idea to formulate the foundation not only in the style system, but also in the functioning of the site as a whole. A web resource is a specific goal, the implementation of the required functionality, rules for displaying information and dialogue with a visitor.