How do I create a CSS object? Get the right granularity

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

In the last article, I said:

Hard to put CSS and HTML into PHP can prevent the code is too boring (DRY) and eventually lead to a bloated code, because the CSS and HTML needs than PHP more detailed object structure. In fact, PHP templates are not inherently appropriate because each template contains a number of different HTML and a combination of CSS objects in different ways.

Then I did not explain it, or give the appropriate context. I'm sorry!

The correct granularity is one of the keys to reducing the CSS

At the PHP level, the following session stream (from Facebook) may be a single object. All the logic that detects which HTML to show or hide is contained in an object structure.

A Facebook conversation stream

Typically, developers try to make this CSS match midrange (between front and back?) Logic。 All of the CSS code we expect to use for this session stream is included in an ID-wrapped sandbox, such as #story. This will end the bloated and boring code. Why? Because the appropriate structure of the CSS layer is more granular (smaller granularity). In fact, trying to give CSS structure in the PHP layer is like trying to configure Apache with a database schema. This is not workable.

The session stream has many smaller (finer) objects

So, we can see that the conversation flow above is made up of many smaller objects. When we make objects more granular (particles are smaller), we start to see the same patterns recur, and the same objects become more reusable. We begin to see that most Web sites on the Internet are combined in different ways by the same basic repetitive pattern. As a fringe benefit, CSS becomes smaller and simpler.

This session stream, a PHP object, is made up of several HTML and CSS objects:

1 titles

5 Media Blocks

2 Link Styles

1 Comments List

1 Action list

1 paragraphs

The benefits of this approach?

Making CSS objects fit means that our CSS (well, by extension, our HTML) becomes simpler and lighter. Our small reusable objects can be used throughout the site to create new and different pages without adding the size of the CSS.

As a starting point, I recommend that you create the following objects: Title, list, word processing, and links, containers, media, grids, and templates. Before you do the entire page, create all of your smallest objects, and then your CSS will naturally remain small.

This article translates from: How to create CSS objects? Get the granularity right!

Original Author: Nicole Sullivan

How to create a CSS object? Get the right granularity!

Please respect the copyright, reproduced please indicate the source, thank you!

Original address: http://www.qianduan.net/css-granularity-architecture.html