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!!!
80. OK
<div id=“warning”>!
<h1>Cuidado com os nomes</h1>!
<p>…</p>!
<button>OK</button>!
</div>
Cuidado com os nomes
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Etiam ut sagittis diam. Ut tincidunt
iaculis eleifend. Donec sed scelerisque erat?
81. #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?
82. Nome
Email
Mensagem
Enviar
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?
118. /**!
* 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.!
*/
119. /**!
* 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);!
}