Más sobre selectores

Malas Prácticas dichas en Clase Hasta Ahora

• Utilizar tanto id en CSS
• Utilizar el !important
• Utilizar la etiqueta <style> dentro del archivo html
• Utilizar el atributo style dentro de las etiquetas html
• Utilizar div para contener todo ignorando los header, nav, section, article, etc.
• No utilizar la etiqueta <form> para hacer formularios
• Utilizar las etiquetas <select> y <option> para hacer selectores o menús desplegables.
• No nombrar el primer archivo html del proyecto como index.html
• No tener archivos .css para cada pantalla de un proyecto.
• Tener todo el css junto en un solo archivo.
• No ponerle el atributo alt a una imagen
• Poner imágenes dentro de <div> en vez de <figure>
• Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS, text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras gritando.
• Poner videos que se reproduzcan solos.
• No optimizar las imágenes.
• No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
• No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada para CSS.
• No cerrar las etiquetas que se cierran en sí mismas como <br/>
• No comentar partes esenciales de tu código.
• No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto para que los navegadores los puedan ubicar mejor.
• No usar la etiqueta <meta name=”viewpor” content=”width=device-width, initial-scale=1.0”> para hacer tu proyecto responsive.
• No poner el atributo autocomplete=”valor” en los campos de tu formulario para hacerle la vida más fácil al usuario
• No usar el atributo required en los campos obligatorios de tu formulario como una primera capa de seguridad

Mandamientos sacados de https://developer.mozilla.org/es/docs/Web/CSS/Especificidad

1.- Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
2 .- Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
3.- Nunca uses !important cuando estés intentando escribir un plugin/mashup.
4.- Nunca uses !important en todo el código CSS.

Estilización en CSS explicadapor Thanos 😃

Este curso es lo mejor que hay!
Por fin aclare todo esto de la especificidad Muchas Gracias Diego!

Recuerden.
1- Evitar usar !important
2- Evitar usar estilos embebidos (Estilos en la etiqueta html).
3- Evitar usar ID para dar estilos en CSS por que tienen mas peso y dan conflictos.

Si usan Visual Studio Code pueden ver que peso tiene el o los selectores que están usando.
Solo pongan el mouse sobre los selectores y podrán verlo de la siguiente manera (ID, Class, Elemento HTML)

Cuando logro entender todo:
-El cielo resplandece a mi alrededoooor!
AJAJJAJAJAJAJAJAJA

CSS Diner
es un juego para practicar selectores de css!

Le estaba explicando a un amigo sobre la especificidad y se me ocurrió esta comparación con la que lo entendió perfecto y quiero compartirlo porque tal vez le sirva a alguien más:

Digamos que HTML es un alumno de Platzi.
HTML hace sus apuntes muy completos con todo lo que necesita (html contiene todo lo que la página requiere), sin embargo al ver sus apuntes no queda muy convencido de cómo se ve, por lo que le pide ayuda a su amiga, la chica de los plumones CSS.

CSS hace un diseño padrísimo utiliza distintos colores y técnicas en cada elemento del apunte (#id, .class, etc), pero, nota que HTML puso en su apunte (código html) cierto párrafo con rojo (estilos embebidos) y piensa que debe haber una razón importante por lo que lo hizo, así que a pesar de ella haber planeado en su apunte estilizado ponerlo amarillo (.class amarillo) en el apunte que ella entrega (cuando carga la página) queda rojo.

Obviamente es una comparación burda pero espero les sirva a alguien (:

Esto no es un aporte pero como experiencia personal, cuando yo empecé a aprender CSS lo hice por mi cuenta. Compré cursos en Udemy. Seguía a youtubers, artículos, etc.
La cuestión es que este tema de la especificidad en CSS cuando ya las combinas entre id y las clases, clases y clases, clases y elementos, nunca me quedó muy claro. Yo opté por aprender Sass para olvidarme del tema. Según yo era la mejor opción en ese tiempo.
La manera de explicarlo en estos vídeos está super clarísimo con los demos. Y realmente soluciona muchos problemas. Si necesitan verlo dos veces, hagánlo. Lo mejor es aprender bien las bases desde el principio. Saludos!

Les comparto este hilo que hizo teffcode en Twitter hablando sobre la especificada en CSS, es muy bueno y creo que complementa muy bien la clase:

https://twitter.com/teffcode/status/1159162961090490369

Seguramente sea la pagina mas fea y incompleta que veran en su vida 😂 pero la ire evolucionando al pasar el curso.

ahora entiendo porque en React se utiliza siempre ClassName y no los Id, por eso nunca utilicen id por la especificidad 😃

CSS Specificity Wars

💥💥

Aqui un resumen de la clase

profesores como degranda son lo que hacen que platzi sea el mejor medio de estudio online al día de hoy, felicidades degranda por ese gran dominio de explicar con simplicidad las cosas

eres de los mejores, por no decir el mejor en tu profesión

Dame una: " A ".
-A.
Dame una: " M ".
-M.
Dame una: " O ".
-O.
Dame una: " E ".
-E.
Dame una: " S ".
-S.
Dame una: " T ".
-T.
Dame una: " E ".
-E.
Dame una: " C ".
-C.
Dame una: " U ".
U.
Dame una: " R ".
-R.
Dame una: " S ".
-S.
Dame una: " O ".
-O.

¡QUE DICE! … AMO ESTE CURSO ❤️ :3

QUE BUENAS EXPLICACIONES Y RECOMENDACIONES PARA MI VIDA PROFESIONAL TE AGREDEZCO DEMASIADO.

Aun no me queda muy claro cuando se debe usar un id y una clase …
¿cuando es estrictamente necesario?

Cuando nos parámos en el editor de texto en el .css nos sale “selector specificity” (1,0,1) El primer número habla del ID, el segundo de la Clase y el Tercero de la Etiqueta.

No es buena practica usar important
No es buena practica usar estilos embebidos en etiquetas
No es buena practica usar id para dar estilos
Si es buena practica usar clases para estilos

Malas Prácticas dichas en Clase Hasta Ahora
Utilizar tanto id en CSS
Utilizar el !important
Utilizar la etiqueta <style> dentro del archivo html
Utilizar el atributo style dentro de las etiquetas html
Utilizar div para contener todo ignorando los header, nav, section, article, etc.
No utilizar la etiqueta <form> para hacer formularios
Utilizar las etiquetas <select> y <option> para hacer selectores o menús desplegables.
No nombrar el primer archivo html del proyecto como index.html
No tener archivos .css para cada pantalla de un proyecto.
Tener todo el css junto en un solo archivo.
No ponerle el atributo alt a una imagen
Poner imágenes dentro de <div> en vez de <figure>
Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS, text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras gritando.
Poner videos que se reproduzcan solos.
No optimizar las imágenes.
No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada para CSS.
No cerrar las etiquetas que se cierran en sí mismas como <br/>
No comentar partes esenciales de tu código.
No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto para que los navegadores los puedan ubicar mejor.
No usar la etiqueta <meta name=”viewpor” content=”width=device-width, initial-scale=1.0”> para hacer tu proyecto responsive.
No poner el atributo autocomplete=”valor” en los campos de tu formulario para hacerle la vida más fácil al usuario
No usar el atributo required en los campos obligatorios de tu formulario como una primera capa de seguridad

Les aseguro que leer esta nota de Selectores avanzados valdrá el tiempo invertido. Después de ello pueden practicar con el juego de CSS Dinner SELECTORES AVANZADOS

En esta clase aprendimos que:

• No es buena práctica usar el !imporntat.
• No es buena práctica usar los estilos embebidos.
• No es buena práctica usar muchos id.

Estuve tratando de resolver este problema usando la pseudoclase :last-child ya que era el último elemento el que se quería pintar, estuve haciéndolo de esta manera y no me funcionaba:

.nav a:last-child{
	background: orange;
	}

Luego estuve viendo el código del HTML y me di cuenta que el problema era que debía aplicar la pseudoclase al <li> y lo hice de esta forma y me salió, estoy tan feliz 😄

.nav li:last-child a{
background: orange;
}

¡Cada clase admiro más a este hombre!

Notas de la clase

Clase 29 - más sobre selectores

¿Cuál es el selector que más deberíamos usar para trabajar con CSS y los elementos HTML?
El selector de clase.

¿Visual Studio Code nos brinda una ayuda para saber el nivel de especificidad que tiene un selector?

• Sí.

¿Cómo podemos usar la ayuda que nos brinda Visual Studio Code en cuanto al valor de especificidad de un selector?

• Solo con pasar el cursor del mouse podemos desplegar la ventana de ayuda que nos da VSC y ver el valor que tiene el selector.

¿Por qué es mala práctica usar ID para CSS?

• Porque tiene un valor de especificidad muy alto y puede causarnos problemas.
  Debido a que solo se puede usar en un solo elemento HTML no es útil cuando queremos replicar el mismo estilo a diferentes elementos.

¿Cómo podemos evitar el sobre uso de las clases?

• Siendo muy específicos usando las etiquetas que están contenidas en la etiqueta que tiene la clase.

Vamos chicos que si se puede, esto lo he logrado gracias a lo aprendido en el curso :33

Buenas Practicas

• Hagamos los estilos con etiquetas, clases y pseudo elementos
• Deja de usar !important
• Evitar usar estilos embebidos
• Evita usar id para los estilos

Para que sepan el peso de sus estilos en CSS con el editor VSC, deben poner el cursor del mouse sobre el selector e inmediatamente les saldrá esta información:
(

📑 No es buena practica usar estilos embebidos en etiquetas, dificulta el mantenimiento.

Más sobre selectores

Utilizar id’s # para estilar no son buenas practicas sobre todo porque son muy importantes para el estilo y son específicos.

No es buena practica utilizar !important, estilos embebidos y utilizar id’s para los estilos. Los id’s son únicamente para el tema de especificidad.

Todo lo podemos trabajar en CSS con clases, etiquetas y pseudo elementos.

muy útil… yo le ponía ids a todo 😄

IMPORTANTE

Dejar de utilizar id para CSS y empezar a utilizar class

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Clase Para Mejorar y Quitarle los Id</title>
<link rel=“stylesheet” href="./style.css">
</head>
<body>
<header class=“page-header”>
<h1 id=“page-title” class=“title”>Empresa </h1>
<nav>
<ul id=“main-nav” class=“nav”>
<li><a href="" class=“home”>Home</a></li>
<li><a href="" class=“cursos” >Cursos</a></li>
<li><a href="">Instructores</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contactanos</a></li>
<!-- Mala practica */ -->
<li>
<a href="" class=“Contactano” > Contactano</a>
<!-- LO QUE LE FALTA A LO DE ARRIBA A LA MALA PRACTICA–>
</li>
</ul>
</nav>
</header>
</body>
</html>

*   {
box-sizing: border-box;
margin: 0;
padding: 0;

}
h1 {
color: purple;
font-family: serif;
margin-bottom: 10px;
}
/* asi se llama id */

}
.title {
font-size: 18px;
font-family: monospace;
}
.nav {
margin-top: 10px;
list-style-type: none;
padding-left: 0;
}

/* PONER DE MANERA HORIZONTAL*/
.nav li {
display: inline-block;
}
.nav a {
color: white;
background-color: darkcyan;
padding: 8px;
border-radius: 20px;
text-decoration: none;
}

/ESTILO INDEVIDO Y POR ESO NO SE APLICA/
.nav .Contactano {
background-color: blue;
}

.nav .home {
background-color: brown;
}

.nav .cursos {
background-color: red;
}
<!–Malas Prácticas dichas en Clase Hasta Ahora
Utilizar tanto id en CSS
Utilizar el !important
Utilizar la etiqueta <style> dentro del archivo html
Utilizar el atributo style dentro de las etiquetas html
Utilizar div para contener todo ignorando los header, nav, section, article, etc.
No utilizar la etiqueta <form> para hacer formularios
Utilizar las etiquetas <select> y <option> para hacer selectores o menús desplegables.
No nombrar el primer archivo html del proyecto como index.html
No tener archivos .css para cada pantalla de un proyecto.
Tener todo el css junto en un solo archivo.
No ponerle el atributo alt a una imagen
Poner imágenes dentro de <div> en vez de <figure>
Utilizar textos solo en mayúscula en HTML, en vez de utilizar el atributo de CSS, text-transform, con el valor uppercase. Ya que al hacer esto pareciera que estuvieras gritando.
Poner videos que se reproduzcan solos.
No optimizar las imágenes.
No tener cuidado de cual es el formato ideal para las imágenes y su respectivo peso.
No tener cuidado con la respectiva semántica de HTML, y con la sintaxis adecuada para CSS.
No cerrar las etiquetas que se cierran en sí mismas como <br/>
No comentar partes esenciales de tu código.
No poner la etiqueta <meta name=”robots” content=”index,follow”> en tu proyecto para que los navegadores los puedan ubicar mejor.
No usar la etiqueta <meta name=”viewpor” content=”width=device-width, initial-scale=1.0”> para hacer tu proyecto responsive.
No poner el atributo autocomplete=”valor” en los campos de tu formulario para hacerle la vida más fácil al usuario
No usar el atributo required en los campos obligatorios de tu formulario como una primera capa de seguridad -->

el !important! en que ocaciones es mas semantico usarlo?

Excelente clase, por eso me gusta mucho aprender en platzi te enseñan las buenas prácticas de desarrollo web. Antes lo que hacía era si tenía un problema de especificidad recurría al estilo embebido o al important.

2 Hermanos generales
https://developer.mozilla.org/es/docs/Web/CSS/Selectores_hermanos_generales

1 Hermanos Adyacentes
https://developer.mozilla.org/es/docs/Web/CSS/Selectores_hermanos_adyacentes

No tenia idea para que era el Selector de Especifidad, ahora ya eniendo el tema de las importancias y los selectores de la especifidad, esta clase esta llena de valor 😀

Practicando lo aprendido

Les dejó una guía de buenas prácticas en CSS

14 Buenas Prácticas de CSS para Principiantes

este es mi intendo de demo de la barra de navegancion de twitch, para mi programar no es facil, pero cuando veo que todo esta encanjando como yo quiero, me siento como un niño en plena navidad abriendo un regalo xd, solo llevo una semana en todo esto

Este profe va como rápido.

Pro tip: Si desean modificar varias etiquetas a la vez con un mismo valor, en el caso que Diego borro los id’s en CSS de ‘#main-nav’ por solo ‘.nav’, presionando ALT + Click Izquierdo pueden poner varias líneas para escribir o borrar a la vez.

Mi cerebro explota!!! pero todavía se puede!!!

Podemos hacer la mayoría del código HTML y CSS únicamente con clases, etiquetas y pseudo elementos. Ya que el uso de muchos id para generar estilos, solo nos crea conflictos en la especificidad.

les dejo mis apuntes:

Holas de nuevo, tengan cuidado en que etiqueta colocan la class para el CSS: yo me equivoque y coloque la class blog en la etiqueta <li> <li class="blog"><a href="">Blog</a></li> la forma adecuada es esta: <li><a href="" class="blog">Blog</a></li> de igual modo les comparto el CSS por si tienen fallos allí.

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
h1{
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
}
.title{
    font-size: 18px;
    font-family: monospace;
}
 .nav{
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0px;
}
.nav li{
    display: inline-block;
}
.nav a{
    background: #13a4a4;
    color: white;
    border-radius: 2px;
    padding: 5px;
    text-decoration: none;
}
.nav .blog{
    background-color: tomato;
}

RESUMEN CLASE 29:
MAS SOBRE SELECTORES

NO SON BUENAS PRACTICAS UTILIZAR:

$ !important 
$ Style=""
$ id

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header class="page-header">
        <h1 id="page-title" class="title">Empresa</h1>
        <nav>
            <ul id="main-nav" class="nav">
                <li><a href="">Home</a></li>
                <li><a href="">Cursos</a></li>
                <li><a href="">Instructores</a></li>
                <li>
                    <a href="" class="blog">Blog</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1 {
    color: purple;
    font-family: serif;
    margin-bottom: 10px;
}

.title {
    font-size: 18px;
    font-family: monospace;
}
.nav {
    margin-top: 10px;
    list-style-type: none;
    padding-left: 0;
}

.nav li {
    display: inline-block;
}

.nav a {
    color: white;
    background-color: #121f3d;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

.nav .blog {
    background-color: red;
}

Información resumida de esta clase
#EstudiantesDePlatzi

• Utilizar mucho el id en CSS no es una buena práctica, en este caso lo mejor es utilizar las clases y tener muy claro la especificidad

• No utilizar el !importatn

Me gustó este enlace porque te ayuda a ver por separado etiquetas de texto y etiquetas de contenido en HTML creo que es base importante para dar lógica a lo que se le implementará en CSS.

https://www.eniun.com/etiquetas-contenido-texto-html/

Caso de estudio

Para evitar usar un id, es mejor jugar con la especificidad como en el siguiente caso:

.nav a { /* especificidad (0, 1, 1) */
    color: white;
    background-color: teal;
    padding: 5px;
    border-radius: 2px;
    text-decoration: none;
}

.nav .blog { /* especificidad (0, 2, 0) */
    background-color: red;
}

La clase .nav y la etiqueta a dan una especificidad de (0, 1, 1) que lo pone en un nivel superior, por lo que cuando se aplica la clase .blog (que está dentro de una etiqueta a) lo sobre escriben. Pero .blog está dentro de la clase .nav, por lo que al escribir las dos clases juntas .nav .blog {} su especificidad es de (0, 2, 0), lo cuál es mayor y, por lo tanto, sobre escribe a .nav a {}.

Inspector de elementos.

Me gusta como nos advierte sobre las malas practicas. Se agradece!!

Me gustaría saber que opinan de esta forma

Excelente porque ya habia visto otros cursos donde estaban enseñando malas practicas

lo que me tomo aprender en 5 clases presenciales, aburridas y largas. Aqui en platzi 💚 lo aprendi en 8:12 minutos 🤯🚀. Realmente si es educación online efectiva!

Cuando un elemento tiene más de un valor distinto se genera un conflicto y CSS elige el que tenga mayor importancia. Para calcular la importancia se hace lo siguiente.
Si el selector es por etiqueta o pseudoelemento vale 1 punto, si es por clase pseudoclase o atributo vale 10, si es por id vale 100, si es inline style vale 1000, si está marcado important vale 10000, si hay selectores concatenados se suman y si hay 2 con el mismo valor se tomará el que está indicado después en el código.

Asi comente yo en mi codigo CSS, se me hace mas facil y practico para entender mejor, ojala le sirva alguien mas.

Ahora recién entiendo porque ciertos estilos nunca se me aplicaban, que importante es ésta clase.

Para crear cosas estetica para una pagina web se recomienda tener una paleta de colores, aqui una pagina:
https://www.colourlovers.com/copaso/ColorPaletteSoftware

wow… hasta que entendí por qué dañanba los proyectos a mitad de camino… jejjejeje

Genial esta clase.
Me dejó clara la teoría de lo que vengo haciendo hace años.
Me siento todo un PRO!

Utilizar important solo para ultimo recurso, mejor hacer buenas practicas para no educarnos mal.

Los id's no son buenas practicas en CSS para estilar y deberian ser removidos Al ser especificos vamos a tener muchos y dificulta el mantenimiento

!importan == voldemord.
el innombrable xD

He aquí mis apuntes
Pueden comentar y duplicarlos.

Muy buena clase!

3 Hijos
https://developer.mozilla.org/es/docs/Web/CSS/Child_combinator

4 Descendientes
https://developer.mozilla.org/es/docs/Web/CSS/Descendant_combinator

Muy buena clase, ya veo con mas claridad el tema de especificidad, a seguir 🤟🏻

Muy bueno!!! Me encanta los manuales con las buenas practicas ❤️

Antes de empezar a estudiar en platzi tome unos cursos de desarrollo frontend y cuando empecé a desarrollar mis propias paginas tuve este problema de especificidad y era muy frustrante pero ahora siento que ya entiendo lo que estaba pasando

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

h1{
font-family: serif;
color: purple;
margin-bottom: 10px;
}

.title{
font-size: 18px;
font-family: monospace;
}

.nav {
margin-top: 10px;
list-style-type: none;
padding-left: 0;
}

.nav li{
display: inline-block; /salir el nav de forma horizontal/
}

.nav a{
color: white;
background-color:#13a4a4;
padding: 5px;
border-radius: 2px;
text-decoration: none;
}

.nav .blog {
background-color: red;
}

Y se preguntarán porque es necesario tener etiquetas ids ademas de las clases???
Es porque van a ser de mucha ayuda cuando intentemos manipular esas etiquetas con JS.

¿Alguien más pasando el curso en los Platzi days gratis? 😏

Los IDs se usan más en js o para indicar la ubicación de un elemento para redirigir ahí

De esta forma en el archivo html , ya no tendriamos la necesidad de escribir los id

Para mi es buena práctica el no aplicar estilos a los contenderores principales como HEADER, NAV, MAIN, FOOTER, etc. En vez de ello agregar un container que englobe a todos los elementos de cada sección.

<body>
  <header>
    <div class="container-header">

    </div>
  </header>
  <main>
    <div class="container-main">
      
    </div>
  </main>
</body>

.

Como usar IDs es malas prácticas, aquí vemos cómo quitarlos

VSC nos ayuda a reconocer la especificidad, si coloco el cursor encima de alguna regla, avajo de la ventana emergente saldrá "Selector Specificity: (1, 0, 1)" por ejemplo, Aquí nos indica que el primer 1 es un ID, el 0 la clase, y el último 1 la etiqueta

MALAS PRÁCTICAS es usar !importat, siempre se debe evitar

MALAS PRÁCTICAS son usar demasiados IDs. Se debe priorizar siempre el uso de Clases y Selectores

Tambien podrías utilizar nth-child(4) para cambiar exactamente el estilo de la etiqueta a de la cuarta posicion

![](

1. Evita usar estilos embebidos de css en html
2. evitar usar tantos id para estilos, usar en casos especiales
3. Evitar el uso de !important

Uuuu genial

jerarquía de la importancia en CSS
1. !important = 10000
2. estilos en linea = 1000
3. #id =100
4. .clases= 10
5. pseudo clases y pseudoelementos =10
6. selector Univeral = 0

Cuando algo no me cuadra, empiezo a comentar estilos hasta lograr el objetivo, luego los borro (por si las moscas)

Tuve un problema por que no me cambiaba el color de el Blog pero me di cuenta que era que en el código de HTML yo no le había designado la clase blog , para poder ser llamada en los estilos.