Primeiro contato com o OOCSS

Se você nunca ouviu falar de OOCSS, em português CSSOO (CSS orientado a objetos), este artigo é para você.
26 de março de 2019 / Desenvolvimento

Se você nunca ouviu falar de OOCSS, em português CSSOO (CSS orientado a objetos), este artigo é para você.

CSSOO é uma forma diferente de codificação, que vai te permitir reutilizar mais seu código CSS sem ter que copiar muitas linhas de código. Mas para isso vamos entender como iniciar esse processo. A primeira regra é separar a estrutura do visual, mas como assim? A estrutura que nos referimos é, por exemplo, a distância de dois elementos em nosso site, ou a altura de um elemento, são propriedades "invisíveis" ao usuário. E os elementos visíveis seriam o nosso visual, tais como a fonte de um título, o visual de um botão, entre outros, esse seria o visual do nosso site.

Depois dessa reestruturação seu código ficará assim:

.button {    width: 150px;    height: 50px;}

.button-2 {    width: 100px;    height: 25px;}

.skin {    background: #FFF;    border-radius: 5px;}

A segunda regra seria a separação do conteúdo do contexto, no HTML5 temos tags como footer, nav e main que nos ajudam a estruturar nosso html, mas no CSSOO nós não utilizamos essas tags em nossa estrutura, mas sim definimos classes que as substituirão e que poderão ser reutilizadas em outros projetos ou páginas, segue o exemplo abaixo:

HTML:

 <header class="container">  <nav class="container-inner"></nav></header>

<main class="container">  <section class="container-inner post-content">    Lorem ipsum  </section></main>

CSS:

.post-content {   font-family: Arial;  letter-spacing: .01rem;  font-weight: 400;  font-style: normal;  font-size: 22px;  line-height: 1.5;}.container-inner {  position: relative;  width: 700px;  margin: 0 auto;}

Se quiser se aprofundar mais, leia os nossos próximos artigos da categoria Desenvolvimento.

Autor Yan Ricardo

Veja mais