CSS architecture, could anyone explain me? [closed]

I totally agree with Guilherme Nascimento, but although the question is a little broad, this is a very little talked about subject and I, in particular, find it interesting, and I understand a little since I saw some time ago in a book, I will tell you and future users.

Let's go in a chronological order:

OOCSS

Object Oriented CSS (Object Oriented CSS) has appeared in 2009 with Nicole Sullivan, with the objective of bringing to CSS some benefits of Object Orientation. As a consequence, it would also lead to non-repetition of code, besides solving some other problems:

• The difficulty of playing medium / large projects; it is necessary to be an expert for this;

• The size of CSS files is increasing as the project evolves;

• Reuse of code almost non-existent (people do not trust code other)

• Fragile code (even the best code can get lost when a non-expert move it).

And from these problems arise solutions that make CSS Modular (combinable, reusable and extensible), Light , Fast (few HTTP and file sizes), Maintainable (semantic and standardized) and Simplified and accessible .

And how do you do that?

With two basic principles:

• Separate structure and skin;
• Separate container and content.

Separate structure and skin is the same standardizing visual features as separate skins, which can be combined into multiple "objects" to achieve an extensive range of visual variations without lots of code. For example, backgrounds and border styles are grouped into own classes preserving "the face of the site."

Separating Container and Content is nothing more than avoiding your elements of your standards libraries from a specific location. "Ideally, an object should look the same no matter where you are on the page, or even change pages."

But what is this Object in CSS?

It is nothing more than that set of elements that you hold to run certain (default) role within the page. This role is governed by CSS classes that you assign to each element. Example (very simple):

Data Table Object

<div class="data"> <!-- wrapper do Data Table -->
    <table class="center"> <!-- Alinha horizontalmente no centro -->
        <tr class="left"> <!-- Texto à esquerda -->
            <th>Chave 1</th> 
            <td>ID1</td>
        </tr>
        <tr class="left"> <!-- Texto à esquerda -->
            <th>Chave 2</th>
            <td>ID2</td>
        </tr>
    </table>
</div>

Now I have to go, but later I will continue with the other topics ...

Sources:

• link
• link
• link
• CSS Efficient Book Techniques and tools that make the difference in your styles