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 {}
CSS-in-JS with React and Styled-Components
By Stiven Castillo
CSS-in-JS with React and Styled-Components
Cuando aprendimos HTML, CSS y Javascript en la universidad o en cualquier otro lugar, nos dijeron que estas eran cosas totalmente aisladas y que se debían manejar de manera separada, cada tecnología en archivos diferentes (Html en archivos html, css en css y javascript en js. Hasta podríamos decir que la estructura de carpetas también se debía manejar separado).
