css pra gente grande
DESCRIPTION
Sabemos que atualmente não é mais o sobrinho do tio da mãe do periquito azul que faz o CSS. E com projetos cada vez maiores e colaborativos, manter e escalar seu CSS é uma missão cada dia mais difícil. Mas não impossível! Aprenda com a experiência de quem já sofreu e tenha disciplina pra aprender e aplicar as melhores práticas pra organizar, reaproveitar e deixar seu CSS legível! Sem bala de prata, mas com chibatada!!!TRANSCRIPT
![Page 1: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/1.jpg)
CSSpra gente grande
![Page 2: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/2.jpg)
www.shankarcabus.com.br
Shankar Cabus
![Page 3: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/3.jpg)
www.shankarcabus.com.br
Shankar Cabusde Teive
![Page 4: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/4.jpg)
www.shankarcabus.com.br
Shankar Cabusde Teive e Argollo
![Page 5: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/5.jpg)
JusBrasil
![Page 6: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/6.jpg)
JusBrasil
![Page 7: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/7.jpg)
css
![Page 8: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/8.jpg)
CSSpra gente
pequena
Sobrinho
![Page 9: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/9.jpg)
![Page 10: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/10.jpg)
![Page 11: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/11.jpg)
HTML
JAVASCRIPT
CSS
![Page 12: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/12.jpg)
HTML
JAVASCRIPT
CSS
informação e estrutura
![Page 13: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/13.jpg)
HTML
JAVASCRIPT
CSS
informação e estrutura
ação e comportamento
![Page 14: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/14.jpg)
HTML
JAVASCRIPT
CSS
informação e estrutura
ação e comportamento
estilo e formatação
![Page 15: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/15.jpg)
![Page 16: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/16.jpg)
![Page 17: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/17.jpg)
![Page 18: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/18.jpg)
CSS embeleza e
facilita o uso
![Page 19: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/19.jpg)
![Page 20: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/20.jpg)
CSS é simples
![Page 21: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/21.jpg)
CSS é simplesde entender!
![Page 22: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/22.jpg)
CSS é simplesde entender!mas difícil de
usar e manter!
![Page 23: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/23.jpg)
![Page 24: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/24.jpg)
![Page 25: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/25.jpg)
TUNEL DO
TEMPO
![Page 26: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/26.jpg)
TUNEL DO
TEMPO
![Page 27: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/27.jpg)
2014
![Page 28: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/28.jpg)
65000000 a.c.
DINOSSÁUROS
![Page 29: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/29.jpg)
17-02-1987
![Page 30: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/30.jpg)
17-02-1987
Shankarzinho
![Page 31: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/31.jpg)
17-02-1987
Shankarzinho Isinha
![Page 32: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/32.jpg)
1988
![Page 33: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/33.jpg)
1989
![Page 34: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/34.jpg)
1989
Tim Berners-Lee
![Page 35: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/35.jpg)
1989
Tim Berners-Lee
Web
![Page 36: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/36.jpg)
1990
Tim Berners-Lee
![Page 37: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/37.jpg)
1990
HTML
Tim Berners-Lee
![Page 38: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/38.jpg)
1991
HTML 1.0
![Page 39: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/39.jpg)
1994
![Page 40: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/40.jpg)
1994
Seleção Brasileira
![Page 41: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/41.jpg)
1994
Seleção Brasileira
Tetra!!!
![Page 42: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/42.jpg)
1994
HTML 2.0imagens
![Page 43: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/43.jpg)
1994
Håkon Lie
![Page 44: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/44.jpg)
1994
Håkon Lie
CSS
![Page 45: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/45.jpg)
1995
HTML 3.0tabelas
![Page 46: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/46.jpg)
1995
HTML 3.0tabelas
IE 1
![Page 47: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/47.jpg)
1996
CSS 1.0
![Page 48: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/48.jpg)
1996
CSS 1.0
IE 3
![Page 49: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/49.jpg)
1997
HTML 3.5
![Page 50: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/50.jpg)
1997
HTML 3.5
IE 4
![Page 51: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/51.jpg)
1999
HTML 4.0
![Page 52: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/52.jpg)
1999
HTML 4.0
IE 5
![Page 53: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/53.jpg)
2001
IE 6
![Page 54: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/54.jpg)
2004
Firefox
![Page 55: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/55.jpg)
2004
Firefox
IE 6
![Page 56: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/56.jpg)
2008
css 2.0
![Page 57: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/57.jpg)
2008
css 2.0
Chrome
![Page 58: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/58.jpg)
2010
html 5
![Page 59: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/59.jpg)
2011
CSS 3.0
![Page 60: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/60.jpg)
2011
CSS 3.0
IE 6
![Page 61: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/61.jpg)
2014
![Page 62: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/62.jpg)
linguagem retardada, armengada
e desorganizada
![Page 63: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/63.jpg)
DIFÍCIL DE MANTER E ESCALAR
![Page 64: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/64.jpg)
Todo CSS começa bem mas você
nunca sabe como vai terminar acabar
![Page 65: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/65.jpg)
COMEÇAR E CONTINUAR
BEM
![Page 66: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/66.jpg)
organizado Legível
Componentizado
CSS
![Page 67: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/67.jpg)
COMO???
![Page 68: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/68.jpg)
calma…
![Page 69: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/69.jpg)
calma…
![Page 70: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/70.jpg)
broken window
![Page 71: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/71.jpg)
disciplina
![Page 72: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/72.jpg)
Chibata
![Page 73: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/73.jpg)
Chibata
![Page 74: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/74.jpg)
ChibataLei da
![Page 75: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/75.jpg)
bala de prata
![Page 76: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/76.jpg)
bala de prata
SMACSS
OOCSS
BEM DRY CSS
CSS Guidelines
GitHub
CodePen
Medium
TrelloSUIT CSS
![Page 77: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/77.jpg)
bala de prata
SMACSS
OOCSS
BEM DRY CSS
CSS Guidelines
GitHub
CodePen
Medium
TrelloSUIT CSS
x
![Page 78: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/78.jpg)
Nome
Mensagem
Enviar
<div id=“contato”>!! <input id="nome" type=“text”>! <input id="email" type=“text">! <textarea id=“mensagem"></textarea>! <button>Enviar</button>!</div>
![Page 79: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/79.jpg)
Nome
Mensagem
Enviar
#contact {! width: 500px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#contact input,!#contact textarea {!! width: 100%;!! border: 1px solid #999;!}!#contact button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: green;!}
![Page 80: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/80.jpg)
OK
Cuidado com os nomes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat?
<div id=“warning”>! <h1>Cuidado com os nomes</h1>! <p>…</p>! <button>OK</button>!</div>
![Page 81: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/81.jpg)
#warning {! width: 400px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#warning h1 {!! font-size: 14px;!! font-weight: bold;!}!#warning button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: blue;!}
OK
Cuidado com os nomes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat?
![Page 82: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/82.jpg)
Nome
Mensagem
EnviarOK
Cuidado com os nomes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut sagittis diam. Ut tincidunt iaculis eleifend. Donec sed scelerisque erat?
![Page 83: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/83.jpg)
#contact {! width: 500px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#contact input, !#contact textarea {!! width: 100%;!! border: 1px solid #999;!}!#contact button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: green;!}
#warning {! width: 400px;! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!#warning h1 {!! font-size: 14px;!! font-weight: bold;!}!#warning button {!! float: right;!! padding: 5px;!! border-radius: 5px;!! background: blue;!}
![Page 84: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/84.jpg)
.box {! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!!.button {! float: right;! padding: 5px;! border-radius: 5px;!}
#warning {! width: 400px;!}!#warning h1 {! font-size: 14px;! font-weight: bold;!}!#warning button {! background: blue;!}!!#contact {! width: 500px;!}!#contact input, !#contact textarea {! width: 100%;! border: 1px solid #999;!}!#contact button {! background: green;!}
![Page 85: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/85.jpg)
<div id="contact" class=“box”>!! <input id="nome" type=“text”>! <input id="email" type=“text">! <textarea id=“mensagem"></textarea>! <button class="button">Enviar</button>!</div>
<div id="warning" class=“box”>! <h1>Cuidado com os nomes</h1>! <p>…</p>! <button class="button">OK</button>!</div>
![Page 86: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/86.jpg)
.box {! padding: 10px;! background: #ccc;! border: 1px solid #999;! border-radius: 5px;!}!!.button {! float: right;! padding: 5px;! border-radius: 5px;!}
#warning {! width: 400px;!}!#warning h1 {! font-size: 14px;! font-weight: bold;!}!#warning button {! background: blue;!}!!#contact {! width: 500px;!}!#contact input, !#contact textarea {! width: 100%;! border: 1px solid #999;!}!#contact button {! background: green;!}
![Page 87: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/87.jpg)
![Page 88: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/88.jpg)
![Page 89: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/89.jpg)
![Page 90: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/90.jpg)
Definindo Padrões e regras
Dona Norma
![Page 91: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/91.jpg)
.foo, .bar!{! padding:15px;! margin:0px 0px 15px;! box-shadow:0px 1px 2px #CCC;! background: #DDDDDD;!}
![Page 92: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/92.jpg)
.foo, .bar!{! padding:15px;! margin:0px 0px 15px;! box-shadow:0px 1px 2px #CCC;! background: #DDDDDD;!}
.foo, !
.bar {! padding: 15px;! margin-bottom: 15px;! box-shadow: 0 1px 2px #ccc;! background: #ddd;!}
![Page 93: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/93.jpg)
use reset
![Page 94: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/94.jpg)
nunca use !important
![Page 95: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/95.jpg)
nunca use #id {…}
![Page 96: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/96.jpg)
não use element {…}
![Page 97: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/97.jpg)
cuidado com classes utilitárias
![Page 98: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/98.jpg)
.clear-float { clear: both; }
![Page 99: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/99.jpg)
.clear-float { clear: both; }
.is-hide { display: none; }
![Page 100: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/100.jpg)
.clear-float { clear: both; }
.float-left { float: left; }!
.mt-20 { margin-top: 20px; }
.is-hide { display: none; }
![Page 101: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/101.jpg)
.clear-float { clear: both; }
<div class=“float-left">
<div style=“float: left”>
.float-left { float: left; }!
.mt-20 { margin-top: 20px; }
.is-hide { display: none; }
![Page 102: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/102.jpg)
Preprocessor
Pedindo Ajuda
![Page 103: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/103.jpg)
.bar {! color: #bada55;! background: #f00;! border: #bada55;!}
![Page 104: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/104.jpg)
.bar {! color: #bada55;! background: #f00;! border: #bada55;!}
@my-green: #bada55;!@my-red: #f00;!!.bar {! color: @my-green;! background: @my-red;! border: @my-green;!}
![Page 105: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/105.jpg)
Modularize
![Page 106: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/106.jpg)
// General Dependencies!@import "mixins";!@import "variables";!!// Base!@import "reset";!@import "layout";!!// Components!@import "typography";!@import "forms";!@import "toolbox";!@import "buttons";!@import "modals";!@import "messages";!@import “badges";!!// Areas!@import "header";!@import "footer";
![Page 107: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/107.jpg)
Use espaço
e identação
![Page 108: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/108.jpg)
.foo {!width: 20px;!height: 150px;!} !.foo .inner-foo {!width: 10px;!height: 10px;!} !.bar {!width: 5px;!height: 5px;!border-radius: 50%;!} !.bar .foo {!background: blue;!}
![Page 109: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/109.jpg)
.foo {!width: 20px;!height: 150px;!} !.foo .inner-foo {!width: 10px;!height: 10px;!} !.bar {!width: 5px;!height: 5px;!border-radius: 50%;!} !.bar .foo {!background: blue;!}
.foo {! width: 20px;! height: 150px;!}!! .foo .inner-foo {! width: 10px;! height: 10px;! }!!!.bar {! width: 5px;! height: 5px;! border-radius: 50%;!}!! .bar .foo {! background: blue;! }
![Page 110: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/110.jpg)
.foo {!width: 20px;!height: 150px;!} !.foo .inner-foo {!width: 10px;!height: 10px;!} !.bar {!width: 5px;!height: 5px;!border-radius: 50%;!} !.bar .foo {!background: blue;!}
.foo {! width: 20px;! height: 150px;!}!! .foo .inner-foo {! width: 10px;! height: 10px;! }!!!.bar {! width: 5px;! height: 5px;! border-radius: 50%;!}!! .bar .foo {! background: blue;! }
![Page 111: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/111.jpg)
.foo {!width: 20px;!height: 150px;!} !.foo .inner-foo {!width: 10px;!height: 10px;!} !.bar {!width: 5px;!height: 5px;!border-radius: 50%;!} !.bar .foo {!background: blue;!}
.foo {! width: 20px;! height: 150px;!}!! .foo .inner-foo {! width: 10px;! height: 10px;! }!!!.bar {! width: 5px;! height: 5px;! border-radius: 50%;!}!! .bar .foo {! background: blue;! }
![Page 112: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/112.jpg)
.foo {!width: 20px;!height: 150px;!} !.foo .inner-foo {!width: 10px;!height: 10px;!} !.bar {!width: 5px;!height: 5px;!border-radius: 50%;!} !.bar .foo {!background: blue;!}
.foo {! width: 20px;! height: 150px;!}!! .foo .inner-foo {! width: 10px;! height: 10px;! }!!!.bar {! width: 5px;! height: 5px;! border-radius: 50%;!}!! .bar .foo {! background: blue;! }
![Page 113: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/113.jpg)
<div class=“foo inner-foo box box-highlight“>
![Page 114: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/114.jpg)
<div class=“foo inner-foo box box-highlight“>
<div class=“foo inner-foo box box-highlight“>
<div class=“[ foo inner-foo ] [ box box-highlight ]“>
![Page 115: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/115.jpg)
<div class=“foo inner-foo box box-highlight“>
<div class=“foo inner-foo box box-highlight“>
<div class=“[ foo inner-foo ] [ box box-highlight ]“>
![Page 116: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/116.jpg)
<div class=“foo inner-foo box box-highlight“>
<div class=“foo inner-foo box box-highlight“>
<div class=“[ foo inner-foo ] [ box box-highlight ]“>
![Page 117: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/117.jpg)
Comente
![Page 118: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/118.jpg)
/**! * The site’s main page-head can have two different states:! *! * 1) Regular page-head with no backgrounds or extra treatments; it just! * contains the logo and nav.! * 2) A masthead that has a fluid-height (becoming fixed after a certain point)! * which has a large background image, and some supporting text.! *! * The regular page-head is incredibly simple, but the masthead version has some! * slightly intermingled dependency with the wrapper that lives inside it.! */
![Page 119: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/119.jpg)
/**! * 1. Default icon size is 16px.! * 2. Squash down the retina sprite to display ! * at the correct size.! */!!.sprite {! width: 16px; /* [@1x] */! height: 16px; /* [@1x] */! background-image: url(/img/sprites/main.png);!}
![Page 120: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/120.jpg)
Dando um nome pro seu filho
Tia Jamile
![Page 121: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/121.jpg)
![Page 122: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/122.jpg)
.componentName
![Page 123: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/123.jpg)
.componentName
.guardaRoupa
![Page 124: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/124.jpg)
.componentName
.componentName-member
.guardaRoupa
![Page 125: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/125.jpg)
.componentName
.componentName-member
.guardaRoupa
.guardaRoupa-gaveta
![Page 126: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/126.jpg)
.componentName
.componentName-member
.guardaRoupa
.guardaRoupa-gaveta
.guardaRoupa-gaveta-puxador
![Page 127: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/127.jpg)
.componentName
.componentName-member
.componentName-member--modifier
.guardaRoupa
.guardaRoupa-gaveta
.guardaRoupa-gaveta-puxador
![Page 128: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/128.jpg)
.componentName
.componentName-member
.componentName-member--modifier
.guardaRoupa
.guardaRoupa-gaveta
.guardaRoupa-gaveta--aberta
.guardaRoupa-gaveta-puxador
![Page 129: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/129.jpg)
![Page 130: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/130.jpg)
.baby {! width: 20px;! height: 150px;! background: white;!}
![Page 131: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/131.jpg)
.baby {! width: 20px;! height: 150px;! background: white;!}
.baby-head {!! width: 10px;!! height: 10px;! }
![Page 132: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/132.jpg)
.baby {! width: 20px;! height: 150px;! background: white;!}
.baby-head {!! width: 10px;!! height: 10px;! }
.baby-head-eyes {!! width: 5px;!! height: 5px;!! border-radius: 50%;! background: brown;! }
![Page 133: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/133.jpg)
.baby {! width: 20px;! height: 150px;! background: white;!}
.baby-head {!! width: 10px;!! height: 10px;! }
.baby-head-eyes {!! width: 5px;!! height: 5px;!! border-radius: 50%;! background: brown;! }
.baby-head-eyes--blue {!! ! background: blue;! }
![Page 134: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/134.jpg)
<div class=“baby”>! <div class=“baby-head”>! <div class=“baby-head-eyes baby-head-eyes--blue”>! </div>!</div>
![Page 135: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/135.jpg)
![Page 136: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/136.jpg)
![Page 137: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/137.jpg)
.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
![Page 138: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/138.jpg)
.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
![Page 139: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/139.jpg)
.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
.button--big {!! padding: 15px 25px;!! font-size: 15px;!}
![Page 140: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/140.jpg)
.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
.button--big {!! padding: 15px 25px;!! font-size: 15px;!}
.button--small {!! padding: 5px 10px;!! font-size: 11px;!}
![Page 141: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/141.jpg)
.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
.button--big {!! padding: 15px 25px;!! font-size: 15px;!}
.button--small {!! padding: 5px 10px;!! font-size: 11px;!}
.button--blue {!! background: #008fed;!}!.button--green {!! background: #79b439;!}!.button--yellow {!! background: #ffb400;!}!.button--orange {!! background: #fe8b00;!}!.button--red {!! background: #ff5604;!}
![Page 142: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/142.jpg)
button--big
button--small
button--blue
button--green
button--yellow
button--orange
button--red
button
![Page 143: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/143.jpg)
![Page 144: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/144.jpg)
class=“button button--big button--blue“
![Page 145: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/145.jpg)
class=“button button--big button--blue“
![Page 146: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/146.jpg)
![Page 147: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/147.jpg)
![Page 148: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/148.jpg)
.dropdown {!! padding-right: 50px;!! &:after {!! ! content: " ";!! }!}
^
![Page 149: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/149.jpg)
.dropdown {!! padding-right: 50px;!! &:after {!! ! content: " ";!! }!}
^.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
![Page 150: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/150.jpg)
.button, .dropdown {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}
.dropdown {!! padding-right: 50px;!! &:after {!! ! content: " ";!! }!}
^
![Page 151: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/151.jpg)
Manutenível
![Page 152: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/152.jpg)
Escalável
Manutenível
![Page 153: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/153.jpg)
Escalável
Organizado
Manutenível
![Page 154: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/154.jpg)
Escalável
OrganizadoLegível
Manutenível
![Page 155: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/155.jpg)
Escalável
Reaproveitável
OrganizadoLegível
Manutenível
![Page 156: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/156.jpg)
Escalável
Reaproveitável
OrganizadoLegível
Manutenível
ModularizadoPadronizado
![Page 157: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/157.jpg)
Escalável
Reaproveitável
OrganizadoLegível
Manutenível
ModularizadoPadronizado
EspaçadoIdentadoComentado
![Page 158: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/158.jpg)
Escalável
Reaproveitável
OrganizadoLegível
Manutenível
ModularizadoPadronizado
EspaçadoIdentadoComentado
Componentizado
![Page 159: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/159.jpg)
Não quebre janela
![Page 160: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/160.jpg)
Disciplina
![Page 161: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/161.jpg)
![Page 162: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/162.jpg)
Chibaaaaaaaaata!!
![Page 163: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/163.jpg)
Obrigado!shankarcabus.com.br
![Page 164: CSS Pra Gente Grande](https://reader034.vdocuments.mx/reader034/viewer/2022052522/5476dc0cb4af9f9c3f8b48c2/html5/thumbnails/164.jpg)
_github.com/shankarcabus/scalable-css-reading-list