Overview of Reset CSS in the Yahoo! YUI

Although on Habré is already quite good material on css-frameworks, and Yahoo! YUI in particular, I would like to separately focus on Reset CSS. The positive feedback on this library on Vadim Makeyev at RHS-2008 simply forced me to download it and see what was inside.

First impression

The library is just huge! The 8.85 MB archive (for today) was not downloaded from the overloaded resourceforge very quickly. The archive was unpacked into the yui folder, in which index.html is lying, for easy navigation through the components of the library and viewing examples. Actually a huge size is caused by the abundance of pictures stuffed with examples + 350 documentation html files + an uncountable number of js files. The “heart” of the library lies in the build folder — the component files distributed in directories.

Yahoo! JavaScript features Youi are impressive. A quick look at the examples showed that the framework can really do a lot, however, this article will deal with CSS.
')

About CSS

CSS component Yahoo! YUI includes four main components (and more, in fact, not needed):

• Reset CSS - resets default styles for HTML elements, the values ​​of which differ from browser to browser.
• Base CSS - establishes uniform base styles for most HTML elements (lists, links, headings, etc.).
• Fonts CSS - sets crossbrowser values ​​for the base font on the page (size, line spacing, monospace for some elements of type code)
• Grids CSS - a set of styles for block layout layouts, both fixed-width and rubber.

Reset CSS

Finally we got a review of the CSS Reset, and look at it in more detail. Along the path / yui / build / reset / it detects a readme and two ccs files:

• reset.css - developer version of the library with comments.
• reset-min.css is the version for connecting directly to the project that has passed through the obfuscator, therefore without comments and in one line. Unsuitable for parsing.

Reset.css code

/ *
Copyright © 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
developer.yahoo.net/yui/license.txt
version: 2.5.1
* /
html {color: # 000; background: #FFF;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
code, form, fieldset, legend, input, textarea, p, blockquote, th, td {margin: 0; padding: 0;}
table {border-collapse: collapse; border-spacing: 0;}
fieldset, img {border: 0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
li {list-style: none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;}
q: before, q: after {content: '';}
abbr, acronym {border: 0; font-variant: normal;}
/ * to preserve line-height and selector appearance * /
sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}
input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit;}
/ * to enable resizing for IE * /
input, textarea, select {* font-size: 100%;}
/ * because legend doesn't inherit in IE * /
legend {color: # 000;}

Let us consider in more detail the following rules:

html {color: # 000; background: #FFF;}
- white background and black text color is useful, because the user in the browser settings can set their default values, which will spoil the design of the page.

heap of elements {margin: 0; padding: 0;}
- reset indents.

q: before, q: after {content: '';}
- reset the contents of the pseudo-elements of the quote.

abbr, acronym {border: 0; font-variant: normal;}
- for abbreviation and acronym leaves
custom case of characters.

address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal;}
- sets the usual style and bold text in these elements.

fieldset, img {border: 0;}
- reset the boarder. Extremely annoying default border for images in links.

caption, th {text-align: left;}
- left alignment for headings and table header cells.

input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit;}
- for standards-compliant browsers (not IE :), forces the font properties of form elements to inherit from the parent.

legend {color: # 000;}
- the legend does not inherit the color of the text in IE, we prescribe it explicitly.

input, textarea, select {* font-size: 100%;}
- 100% width of fields in IE.

Something like this.

pros

Using Yahoo! YUI Reset CSS will definitely be useful for your project.

• The library attentively treated all standard fixes and you can forget about writing the zero border at the beginning of all css-files on img and collapse on the table at the beginning.
• The rarely used elements of semantic layout are not forgotten (do not throw slippers over the epithet “rarely used”, but this is true), which browsers by default always handle through the stump-deck. Nicely.
• The library avoided numerous invalid fixes for IE, which is why it remained simple and understandable. But, unfortunately, not all: (
• Yahoo! Developers Constantly update the framework, so you do not have to make a lot of effort to upgrade your reset.

In general, PR!

Crosspost Review of CSS Reset in Yahoo! YUI c webew.ru