CSS

CSS

• html

Frameworks

• https://picocss.com/
• bulma
• bootstrap
• Kitchen Sink Demo

Dark Mode

• CSS Tricks

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
}


@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
}

Custom Properties

MDN

Nesting

MDN

Nesting Selector &

/* Without nesting selector */
.parent {
  /* parent styles */
  .child {
    /* child of parent styles */
  }
}

/* With nesting selector */
.parent {
  /* parent styles */
  & .child {
    /* child of parent styles */
  }
}

/* the browser will parse both of these as */
.parent {
  /* parent styles */
}
.parent .child {
  /* child of parent styles */
}

Parent Selector &

.someClass {
  :global(.dark-mode) & {
    background-color: black;
    color: #ffffff;
  }
}

becomes:

:global(.dark-mode) .someClass {
  background-color: black;
  color: #ffffff;
}