Create a CSS object to make the CSS object as granular as appropriate

Web page Production WEBJX article introduction: The object that creates the CSS makes the CSS object fit to the granularity.

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, the developer tries to make this CSS match the midrange (between the front end and the back end?). 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 up with bloated and boring code. Why, then? 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 (more granular) objects

So, as we can see, the conversation flow above is made up of a number of 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 do I create CSS objects? Get the granularity right!
Original Author: Nicole Sullivan
Chinese Original: How do I create a CSS object? Get the right granularity!
Please respect the copyright, reproduced please indicate the source, thank you! Vn:f [1.9.2_1090]