Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

🔍 What do you find here?

CSS Modules

CSS files in which all class names and animation names are scoped locally by default.

<aside> 💡 ❯ Scoped CSS as native way ❯ It does not accept style tag directly, put it a class or id

</aside>

import **styles** from '../styles/home.module.css';

export default function Home() {
  return (
    <h1 className={**styles.title**}>IgNews</h1>
  )
}

SASS

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax," uses a syntax similar to Haml. Official website: https://sass-lang.com/

<aside> 💡 ❯ .scss: you need to put {} to indicate the styles ❯ .sass: you do not need to put {} to indicate the styles ❯ &: references the same element type: li { & + li } : get all li that has a li before it

</aside>

Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress. (CSS in JS) Official website: https://styled-components.com/

<aside> 🛠 ❯ yarn add styled-components ❯ yarn add polished

❯ styled: export const, add HTML element and styles inside `` ❯ CSS: add logic inside style, catch props from react element ❯ polished: tooltips to CSS, as shade## SASS

</aside>

import styled, { css } from 'styled-components';
import { shade } from 'polished';

interface FormProps {
  hasError: boolean;
}

**// Style as component, scoped based**
export const Form = **styled**.form<FormProps>`
  input {
    border-right: 0;

    ${props =>
      props.hasError &&
      **css**`
        border-color: #c53030;
      `}

    &::placeholder {
      color: #a8a8b3;
    }
  }

  button {
    width: 210px;

    &:hover {
      background: ${**shade**(0.2, '#04d361')};
    }
  }
`;