css pra gente grande

CSSpra gente grande

www.shankarcabus.com.br

Shankar Cabus


Shankar Cabusde Teive


Shankar Cabusde Teive e Argollo

JusBrasil

CSSpra gente

pequena

Sobrinho

HTML

JAVASCRIPT

CSS

HTML

JAVASCRIPT

CSS

informação e estrutura

HTML

JAVASCRIPT

CSS


ação e comportamento

HTML

JAVASCRIPT

CSS


ação e comportamento

estilo e formatação

CSS embeleza e

facilita o uso

CSS é simples

CSS é simplesde entender!

CSS é simplesde entender!mas difícil de

usar e manter!

TUNEL DO

TEMPO

65000000 a.c.

DINOSSÁUROS

17-02-1987

17-02-1987

Shankarzinho

17-02-1987

Shankarzinho Isinha

1989

Tim Berners-Lee

1989

Tim Berners-Lee

Web

1990

Tim Berners-Lee

1990

HTML

Tim Berners-Lee

1991

HTML 1.0

1994

Seleção Brasileira

1994

Seleção Brasileira

Tetra!!!

1994

HTML 2.0imagens

1994

Håkon Lie

1994

Håkon Lie

CSS

1995

HTML 3.0tabelas

1995

HTML 3.0tabelas

IE 1

1996

CSS 1.0

1996

CSS 1.0

IE 3

1997

HTML 3.5

1997

HTML 3.5

IE 4

1999

HTML 4.0

1999

HTML 4.0

IE 5

2001

IE 6

2004

Firefox

2004

Firefox

IE 6

2008

css 2.0

2008

css 2.0

Chrome

2010

html 5

2011

CSS 3.0

2011

CSS 3.0

IE 6

linguagem retardada, armengada

e desorganizada

DIFÍCIL DE MANTER E ESCALAR

Todo CSS começa bem mas você

nunca sabe como vai terminar acabar

COMEÇAR E CONTINUAR

BEM

organizado Legível

Componentizado

CSS

COMO???

calma…

broken window

disciplina

Chibata

ChibataLei da

bala de prata

bala de prata

SMACSS

OOCSS

BEM DRY CSS

CSS Guidelines

GitHub

CodePen

Medium

TrelloSUIT CSS

bala de prata

SMACSS

OOCSS

BEM DRY CSS

CSS Guidelines

GitHub

CodePen

Medium

TrelloSUIT CSS

x

Nome

Email

Mensagem

Enviar

<div id=“contato”>!! <input id="nome" type=“text”>! <input id="email" type=“text">! <textarea id=“mensagem"></textarea>! <button>Enviar</button>!</div>

Nome

Email

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;!}

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>

#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



Nome

Email

Mensagem

EnviarOK



#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;!}

.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;!}

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

.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;!}

Definindo Padrões e regras

Dona Norma

.foo, .bar!{! padding:15px;! margin:0px 0px 15px;! box-shadow:0px 1px 2px #CCC;! background: #DDDDDD;!}

.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;!}

use reset

nunca use !important

nunca use #id {…}

não use element {…}

cuidado com classes utilitárias

.clear-float { clear: both; }


.is-hide { display: none; }


.float-left { float: left; }!

.mt-20 { margin-top: 20px; }



<div class=“float-left">

<div style=“float: left”>

.float-left { float: left; }!

.mt-20 { margin-top: 20px; }


Preprocessor

Pedindo Ajuda

.bar {! color: #bada55;! background: #f00;! border: #bada55;!}

.bar {! color: #bada55;! background: #f00;! border: #bada55;!}

@my-green: #bada55;!@my-red: #f00;!!.bar {! color: @my-green;! background: @my-red;! border: @my-green;!}

Modularize

// 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";

Use espaço

e identação

.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;!}

.foo {! width: 20px;! height: 150px;!}!! .foo .inner-foo {! width: 10px;! height: 10px;! }!!!.bar {! width: 5px;! height: 5px;! border-radius: 50%;!}!! .bar .foo {! background: blue;! }

Comente

/**! * 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.! */

/**! * 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);!}

Dando um nome pro seu filho

Tia Jamile

.componentName

.componentName

.guardaRoupa

.componentName

.componentName-member

.guardaRoupa

.componentName


.guardaRoupa

.guardaRoupa-gaveta

.componentName


.guardaRoupa

.guardaRoupa-gaveta

.guardaRoupa-gaveta-puxador

.componentName


.componentName-member--modifier

.guardaRoupa

.guardaRoupa-gaveta


.componentName


.componentName-member--modifier

.guardaRoupa

.guardaRoupa-gaveta

.guardaRoupa-gaveta--aberta


.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 {!! width: 5px;!! height: 5px;!! border-radius: 50%;! background: brown;! }

.baby-head-eyes--blue {!! ! background: blue;! }

.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--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;!}

button--big

button--small

button--blue

button--green

button--yellow

button--orange

button--red

button

class=“button button--big button--blue“

.dropdown {!! padding-right: 50px;!! &:after {!! ! content: " ";!! }!}

^


^.button {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}

.button, .dropdown {!! padding: 10px 20px;!! border-radius: 3px;!! background: #757575;!! color: #fff;!! font-size: 13px;!}


^

Manutenível

Escalável

Manutenível

Escalável

Organizado

Manutenível

Escalável

OrganizadoLegível

Manutenível

Escalável

Reaproveitável

OrganizadoLegível

Manutenível

Escalável

Reaproveitável

OrganizadoLegível

Manutenível

ModularizadoPadronizado

Escalável

Reaproveitável

OrganizadoLegível

Manutenível


EspaçadoIdentadoComentado

Escalável

Reaproveitável

OrganizadoLegível

Manutenível


EspaçadoIdentadoComentado

Componentizado

Não quebre janela

Disciplina

Chibaaaaaaaaata!!

Obrigado!shankarcabus.com.br

_github.com/shankarcabus/scalable-css-reading-list

css pra gente grande

Technology