CSS architecture, could someone explain it to me?

Asked

Viewed 166 times

1

I’m learning CSS, I’ve read a few articles about good ways to write your code, and that it would help in teamwork. So I read acronyms, like - Well, OCSS, SMACSS. So I was very curious, only that this content in PT-BR is very shallow, at least I found.

css css3
  • 10

    I’ve never heard of any of them, look like patterns created more recently, anyway it’s no use learning them without learning the basics of CSS, learn what are selectors, cascade, pseudo-elements, pseudo-classes and properties. Learn CSS1, CSS2, and css3 (2 has 1 and 3 has 2 and 1). Patterns you should only use when you know the real CSS, they will be unnecessary if you start.

1 answer

4


I totally agree with Guilherme Nascimento, but although the question is a little broad, as this is a subject very little spoken and I find it particularly interesting, and I understand a little since I saw it some time ago in a book, I will talk to you and future users.

Let’s go in a chronological order:

OOCSS

The Object Oriented CSS (Object-Oriented CSS) emerged in 2009 with Nicole Sullivan, with the goal of bringing some benefits of Object Orientation to CSS. As a consequence, it would also bring the non-repeating of code, in addition to solving some other problems:

  • The difficulty of playing medium/large projects; it needs to be an expert at it;

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

  • Almost nonexistent code reuse (people don’t trust code alien);

  • Fragile code (even the best code can be lost when an expert is not touch it).

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

And How to Do It?

With two basic principles:

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

Separate structure and skin It is the same to standardize visual features such as "skins" (visual identity) separate, which can be combined into multiple "objects" to achieve an extensive range of visual variations without much code. For example, backgrounds and edge styles are grouped into classes of their own preserving "the face of the site".

Separate container and contents It’s nothing more than preventing your patterns bilbiotecas elements from a specific location. " Ideally, an object should look the same, regardless of where it is on the page, or even if it changes pages."

But what is this Object in CSS?

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

Object Data Table

<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:

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.