How to Create CSS objects? Get the appropriate granularity!

In the previous article, I mentioned:

Sticking CSS and HTML to PHP can prevent code from being too DRY and eventually leads to code bloated, because CSS and HTML require more detailed object structures than PHP. In fact, PHP templates are not inherently appropriate because each template contains many different HTML and CSS objects that are combined in different ways.

Then, I didn't explain it, or gave a proper context. Sorry!

Correct granularity is one of the keys to reduce CSS

On the PHP layer, the following session stream (from Facebook) may be a single object. All HTML elements to be displayed or hidden are included in an object structure.

A Facebook session stream

Usually, developers try to make the CSS match the middle end (between the front end and the back end ?) Logic. We expect all the CSS code used for this session stream to be included in a sandbox wrapped by ID, such as # story. This will end the bloated and boring code. Why? Because the appropriate structure of the CSS layer is more refined (smaller granularity ). In fact, trying to give the CSS structure in the PHP layer is like trying to use the database architecture to configure Apache. This is not feasible.

A session stream consists of many smaller (more detailed) objects.

Therefore, we can see that the above session stream is composed of many smaller objects. When we make the object more refined (smaller particles), we will begin to see the same pattern appears repeatedly, and then the same object becomes more reusable. We started to see that most websites on the Internet are combined in different ways by the same basically repeated pattern. As an ancillary benefit, CSS will become smaller and simpler.

This session stream, a PHP Object, is composed of several HTML and CSS objects:

1 title

Five media Blocks

2 link styles

1 comment list

1 Action List

1 Paragraph

What are the benefits of this method?

The proper granularity of CSS objects means that our CSS (by extension, our HTML) is simpler and lighter. Our small reusable objects can be used on the entire website to create new and different pages without increasing the css size.

As a starting point, we recommend that you create the following objects: title, list, text processing and link, container, media, grid, and template. Before creating the entire page, create all your smallest objects, and then keep your CSS very small.

How to create CSS objects? Get the granularity right!
Author: Nicole Sullivan
Original Chinese: How to Create CSS objects? Get the appropriate granularity!