Buenas prácticas en CSS: Especificidad y uso adecuado de selectores
Contenido del curso
Malas Prácticas dichas en Clase Hasta Ahora
You rock girl!
creo que lo de el div en vez del figure es alrevez no? según yo diego dijo que estaba mal usar div y que por eso se utiliza el figure
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.
Por que no leyeron eso los de Bootstrap xD
Boostrap usa mucho !important? 🤔
Estilización en CSS explicadapor Thanos :)
Equilibrio perfecto.
Jajajaja muy bueno, eso resume muy bien las tres últimas clases
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)
Muy buen explicado por parte del profesor y gran aporte el suyo compañero.
Gracias Sebastian! Aqui andamos para aportar con lo aprendido en cada clase :)
Cuando logro entender todo: -El cielo resplandece a mi alrededoooor! AJAJJAJAJAJAJAJAJA
jajajajajaja x2
WUAJAJAJA
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 (:
O.o Lo entendi a la perfeccion, oye, tu eres la nina de de los plumones jejeje?
Muy interesante y comprensible su explicación! <3
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!
Estoy de acuerdo, justo estaba recordando lo que aprendí en un curso de desarrollo web y nunca menciona bien como funciona la especificidad y me provocó mucho dolor lo que me hizo dejar el curso... Excelente inversión
No es tan complicado, pero es muy útil, uno entiende por qué comete tantos errores y por qué algunas cosas cuestan tanto y sobretodo QUITAN TANTO TIEMPO
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:
Gracias por el aporte!
Me encantan los dibujitos de Teff...
Seguramente sea la pagina mas fea y incompleta que veran en su vida 😂 pero la ire evolucionando al pasar el curso.
@gian Muestranos como quedo
Se ve genial :,D, muestra el resultado final
ahora entiendo porque en React se utiliza siempre ClassName y no los Id, por eso nunca utilicen id por la especificidad :)
Con este vídeo ya nos aclaro todo, absolutamente todo! Diego es un amor de profesor :)
Oigan react convierte nuestras hojas de estilo en estilos embebidos jajajaja que paso ahi master?
💥💥
CSS Specificity Wars
Aqui un resumen de la clase
Creo que sería al revés el segundo: .titulo h2 {}
Es correcto el segundo, ya que estas especificando que el elemento h2 tiene la clase titulo
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 :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?
Los IDs son utilizados solamente una vez por pagina o por cada archivo html , las clases se pueden utilizar varias veces en diferentes etiquetas. Para CSS es mejor no usar IDs , los IDs son mas utilizados con Javascript. En este caso, al utilizarlos ambos ID y Class juntos técnicamente se utiliza para especificar un estilo a una etiqueta en especifico. Teniendo en cuenta que no es buena practica, es mejor utilizar clases.
Vaya ya veo, Muchas gracias (y)
He leído que Bootstrap abusa de !important, con lo cual tengo las siguientes preguntas -¿Es una mala práctica usar Bootstrap? -¿Se sigue usando Bootstrap en proyectos actuales?
¡Hola! Bootstrap a mi parecer ha tratado de evolucionar, aunque puede que se esté quedando un poco atrás (aún usa jQuery), hoy en día hay un nuevo framework que está tomando mucha popularidad, se llama Tailwind, te recomiendo darle un vistazo ^^
Bootstrap esta lleno de !important y puede ser un dolor de cabeza editar ciertos componentes, por este motivo se recomienda siempre poner los estilos css de Bootstrap antes que los tuyos, de este modo la cascada te puede dar una mano, pero siempre hay que tener ojo con los !important.
Solo como anécdota, me toco desarrollar un landing en el trabajo no tan complejo, por lo que decidí ocupar solo css y ningún framework de apoyo. El resultado final fue que me demore dos días más de lo presupuestado en un trabajo de 2 días y medio, que termino siendo de 4 días. Las ventajas de Bootstrap, o de algún otro framework de css radican en la agilidad que entregan al momento del desarrollo. En ese caso me quedo con Tailwind css como comento el compañero es muy fácil de aprender y es personalizable.
Les dejó una guía de buenas prácticas en CSS
14 Buenas Prácticas de CSS para Principiantes
Me dolió la cabeza al terminar.
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.
Y si añades 2 de cualquier cosa, te deja de salir el 1 y te sale un 2, lo cual te da un mayor nivel automáticamente.
