Detailed CSS dry programming method

Dry is donot repeat youself do not repeat. But in fact the name is a bit boring, which theory is not to eliminate duplication, but how to eliminate the meaning lies. Overall I think Drycss and Oocss are two extremes, so I'll talk about drycss in a contrasting way. Using Drycss is simple, three steps.

1. Grouped Reusable Properties

Drycss and oocss a bit like, the first step is grouped style, eliminate duplication, but as I said, the key is how. Oocss the collection of styles as objects, so the logic of grouping is what an element should be, and DRYCSS is concerned with repetition, no matter what the logic, as long as the same should be only one. The granularity is worth thinking about, if too thin, it will only become a line of the style of a group of such meaningless situation, if too thick, and will become no reuse of the behemoth. I think it's possible to divide some of the associated styles into one group without the need for a, and you can also divide some idioms into groups. Here's an example:

CSS code copy content to clipboard

{

Float:left;

Position:absolute;

Display:inline-block;

Overflow:hidden;

}

This is a set of styles that can be used to trigger the block formatting contexts (chunk-level format context), thus completing a set of styles. Then write 2 groups about the size of the style bar.

CSS code copy content to clipboard

{

width:960px;

Height:auto;

}

{

width:720px;

height:600px;

}

{

width:220px;

height:600px;

}

This is a three-group style used for layout, which divides the page into two parts.

2. Group BY logical name

And then we're going to name it, which is actually adding an ID selector, but we're not really using it, but it's used to mark the group style. Here's how to name the styles that are grouped above.

CSS code copy content to clipboard

#BLOCK_FORMATTING_CONTEXTS

{

Float:left;

Position:absolute;

Display:inline-block;

Overflow:hidden;

}

#LAYOUT_FULL

{

width:960px;

Height:auto;

}

#LAYOUT_CONTENT

{

width:720px;

height:600px;

}

#LAYOUT_SIDEBAR

{

width:220px;

height:600px;

}

This step is similar to the Oocss class, which determines the logic or purpose represented by each group of styles, yet drycss the most critical next step, which is also different from the oocss essence.

3. Add selectors for each group

Drycss differs greatly from Oocss when used, and writes the class selector in HTML to use these grouped styles in the CSS file, rather than using the class written in the CSS file directly in HTML.

CSS code copy content to clipboard

. Header,

. Container,

. Content-rightright,

. Content-left,

#BLOCK_FORMATTING_CONTEXTS

{

Float:left;

Position:absolute;

Display:inline-block;

Overflow:hidden;

}

. Header,

. Navigator,

. Container,

#LAYOUT_FULL

{

width:960px;

Height:auto;

}

. Content-rightright,

. Section,

#LAYOUT_CONTENT

{

width:720px;

height:600px;

}

. Content-rightright,

. Sidebar,

. Profile,

#LAYOUT_SIDEBAR

{

width:220px;

height:600px;

}

As you can see, when using Drycss, the class written in HTML will be very explicit, the element itself is what to do, use its meaning class name, and basically an element corresponding to a class,html will become simple and clear. In addition Drycss is also opposite to oocss a kind of converse thinking, this is the most interesting place. In development, you shouldn't think like oocss about how to deal with the false HTML of the future, but just think about the CSS itself.

In general, OOCSS is suitable for developing CSS frameworks or full UI templates, and is an extroverted UI development approach, while DRYCSS is suitable for saving chaotic HTML, or enhancing the structure and ideographic nature of HTML, and is a way of UI development from within. Here is the HTML structure, the outer refers to the CSS style.