Rafaela Ferro - Nest SI 20
CSS Define o Aspeto dos elementos HTML
Como usar css
<h1 style="color: yellow;">Título amarelo</h1><style>
body { color: white; }
</style><link rel="stylesheet" href="styles.css">Inline
Interno
Externo
CSS define-se com…
Seletores.
Atributos.
Valores.
Seletores.
.class #id .class div
div.class p + p div > p
p:first-child p:nth-of-type(2n) h3 ~ p a[target=_blank] input:focus a::after
Cascade?
Importância
Especificidade
Source order
Atributos +
Valores.
display: inline-block; background-color: #FF0F93; text-decoration: underline; font-size: 2rem; margin: 25px; transform: rotate(90deg) translateX(25px);
SASS / SCSS
Syntactically Awesome Style Sheets!
sass --watch . --style compressed --no-cache --sourcemap=noneul {
display: block;
}
ul li {
color: #0000FF;
border-color: #FF0000;
}
ul li:hover {
text-decoration: underline;
}
ul {
display: block;
li {
color: $blue;
border-color: $red;
&:hover {
text-decoration: underline;
}
}
}
CSS
sCSS
Nesting
Variables
$red: #FF0000;
$blue: #0000FF;
$xs: 4px;
$s: 8px;
$m: 12px;
.container {
color: $blue;
border-color: $red;
button {
padding: $xs $s;
}
}
.container {
color: #0000FF;
border-color: #FF0000;
}
.container button {
padding: 4px 8px;
}
CSS custom properties
:root {
--THEME-COLOR: var(--user-theme-color, #d33a2c);
}
body {
--user-theme-color: pink;
background: var(--THEME-COLOR);
}const elm = document.documentElement;
elm.style.setProperty('--user-theme-color', 'tomato');[Not SCSS]
Partials + Import
//application.scss
@import 'resources/reset',
'resources/palette',
'resources/fonts',
'atoms/button',
'atoms/input',
'blocs/header'
'pages/auth',
'pages/legal_texts';
MIXINS
@mixin tablet { @media (min-width: 750px) { @content; } }
@mixin desktop { @media (min-width: 1000px) { @content; } }
main {
width: 90%;
margin: 32px;
@include tablet {
width: 75%;
}
@include desktop {
width: 50%;
margin: 64px;
}
}
MIXINS
@mixin slide-X($name, $offset) {
@keyframes #{$name} {
0% {
transform: translateX($offset);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
}
@include slide-X(fade-in-title, 32px);
h1 {
animation: fade-in-title .2s ease-in 0;
}MIXINS
@mixin responsive_font($min, $max, $weight:300, $line-height:1.4) {
line-height: $line-height;
font-weight: $weight;
font-size: #{$min}rem;
@include resolution(650px) {
font-size: calc(#{$min}rem + ((#{$max} * 10) - (#{$min} * 10)) * ((100vw - 650px) / 550));
}
@include resolution(1200px) {
font-size: #{$max}rem;
}
}h1 {
@include responsive_font(
$min: 2,
$max: 4,
$weight: 700
);
}h2 {
@include responsive_font(
$min: 1.8,
$max: 3,
$weight: 500
);
}✨ Boas Práticas ✨
Legibilidade e consistência.
O mais verbose possível.
Nesting ao invés de convenções BEM.
Letras minúsculas nas tags HTML, e nos selectores CSS.
Não estilizar por IDs e evitar o uso de !important.
Vários ficheiros.
Browser specific em ficheiros à parte, se necessário.
Mais classes, menos repetição de código.
Evitar camelCase.
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
/* Display & Box Model */
display: inline-block;
overflow: hidden;
box-sizing: border-box;
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #333;
margin: 10px;
/* Color */
background: #000;
color: #fff
/* Text */
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
text-align: right;
/* Other */
cursor: pointer;
}CSS + SCSS — 2020
By Ana Rafaela Ferro
