Rafaela Ferro - Nest SI 19

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=none
ul {
  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.

CSS + SCSS

By Ana Rafaela Ferro

Made with Slides.com

CSS + SCSS

  • 1,992

More from Ana Rafaela Ferro