Stiven Castillo

Frontend Dev / UI Designer

at LaManicurista App 💅

https://stiven.dev

CSS-in-JS

with React and Styled-components

😒

😍

Elementos aislados

Nuevas tecnologías

  • React
  • Angular
  • Vue
  • Svelte
  • Sass
  • Less
  • PostCSS
  • BEM
  • BEMIT
  • npm
  • Yarn
  • Grunt
  • Webpack
  • Gulp
  • TypeScript
  • Redux
  • Rxjs
  • Bootstrap
  • Flexbox
  • Css Grid
  • Graphql
  • Jsx
  • Mobx
  • Babel
  • y Más...

CSS

<style>
  .button {
    background: red;
    padding: 16px;
    color: white;
    border: none;
  }

  .button-rounded {
    border-radius: 8px;
  }
</style>

<button class="button button-rounded">My Fucking Button</button>

Begginers and some 'Experts' 🤫

Important!

Cascada

Herencia

Especificidad

Cascada

Herencia

Especificidad

Es el mecanismo que controla el resultado final de un elemento cuando se le aplican varias reglas.

<style>
  p {
    color: red;
  }

  p {
    color: green;
  }
</style>

<p>Mi vieja mula ya no es lo que era, ya no es lo que era, ya no es lo que era</p>

Cascada

Herencia

Especificidad

Es el mecanismo mediante el cual determinadas propiedades de un elemento padre se transmiten a sus hijos

<style>
  .container {
    color: green;
    font-size: 20px;
    width: 960px;
    padding: 20px;
  }

  .paragraph {
    font-family: sans-serif;
  }
</style>

<div class="container">
  Sonó, sonó, sonó. Me llaman del bar de Moe
  
  <p class="paragraph">En ese buen lugar, me gusta beber alcohol</p>
</div>

Cascada

Herencia

Especificidad

Son los medios por los que el navegador decide qué valores de una propiedad de CSS son más relevantes para un elemento y, por lo tanto, serán aplicados

body.container > #title:hover {}
Made with Slides.com