#yomequedoencasa

Soy Nadia Prida, diseñadora y desarrolladora Front End y me dedico al desarrollo de aplicaciones móviles y webs.

Cómo sacar el máximo partido a CSS

• Pseudo- clases
• Pseudo - elementos
• variables CSS
• Preprocesadores CSS

¿Qué son las pseudo-class CSS ?

son valores que nos permiten agregar estilos o comportamiento a los elementos

Algunos tipos de pseudo-class CSS

Las pseudo - Class pueden estar categorizadas

• Tipo enlace (:link , :visited)
• Ratón (:hover, :active)
• Tipo formulario (:focus, :checked, :placeholder)
• Decorativos ( :nth-child, :last_child, :first-child)

Algunos tipos de pseudo-class CSS

Tipo enlace

• link: se aplican los estilos cuando el enlace no ha sido visitado.
• visited: se aplican los estilos cuando el enlace ya ha sido visitado

Algunos tipos de pseudo-class CSS

Tipo ratón

• hover: Se aplican los estilos cuando pasamos el ratón por encima de dicho elemento.
• active: Se aplican estilos cuando estamos pulsando o haciendo click sobre el elemento

Algunos tipos de pseudo-class CSS

Tipo formulario

• focus: Aplica estilos cuando tiene el foco en los inputs de formularios.
• checked: Aplica estilo a campos como input radio o inpout checbox cuando han sido seleccionados.
• placeholder: Aplica estilos al texto de ayuda que muestran los input text o textarea de formularios.

Los pseudo-elementos CSS

Los pseudo-elementos :before y :after se utilizan para añadir un contenido a un
elemento y puede ir situado alante o atrás.

Las variables en CSS

.elemento-before::before{
  content: "";
  width: 30px;
  height: 30px;
  display: block;
  border:3px solid var(--secondarycolor);
  background: var(--secondarycolorLight);
} 

.elemento-after::after{
  content: "\f005";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    padding: 8px;
    display: inline-block;
    text-decoration: inherit; 
    color:var(--primarycolor);
    background: var(--primarycolorLight);
}

Las variables en CSS

 :root{
  --primarycolor:#D62839;
  --primarycolorLight:#DF7373;
  --secondarycolor:#2EC4B6;
  --secondarycolorLight:#4ceed6;

  --title:'Pacifico', cursive;
  --text:'Montserrat', sans-serif;;
}
  
                  

¿Qué son los preprocesadores CSS?

Son lenguajes que con operadores, bucles, funciones, mixing ... que nos permiten añadir funcionalidad al código y lo compilan a lenguaje css. Tienen como propósito un código más fácil y con mayores ventajas.
Exiten también prepocesadores para JS, html, css ...

Hoy en día existen muchos preprocesadores pero sí hablamos de CSS los más conocidos son Sass, Less y Stylus.Hay una gran cantidad de documentación, ejemplos y frameworks compatibles con ellos.

Cómo sacar el máximo partido a CSS

Si quieres aprender a usarlos utilizando toda esa información no es complicado, sólo debes de
querer invertir tiempo en ello y el resto vendrá solo.

Espero que podáis usar todas estas pautas para sacar el máximo partido a vuestro código CSS.