Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 18D : 10H : 57M : 7S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Metodologías para estructurar código5/42

Las metodologías para estructurar código son sistemas preestablecidos, formales y bien documentados, que te ayudan a escribir y organizar código mantenible y escalable en sistemas grandes y complejos.


CSS Rankings

Hay muchas naming conventions que puedes utilizar para nombrar a tus elementos y evitar la especificidad, la más popular es BEM, pero a continuación anexo algunos otros para que elijan

Metodologías para estructurar tu HTML+CSS (con naming conventions):

Me parece bastante útil e interesante que se brinden ejemplos basados en experiencias vividas por el instructor, nos sera de mucha utilidad para que los que estamos ingresando al mundo del desarrollo para que al momento de entrar al mundo real, lo hagamos de una forma mucho mas profesional. Bien Platzi!.

BEM y Atomic CSS 🔥

css_methodologies_experience_ranking.png

☝ Este es el estado de las 🟢metodologías de CSS que debemos de tener en cuenta para este año 2021

Existe algún link, con las tendencias actualizadas 2020?

Personalmente BEM es la mejor porque se hace muy explicita

Así es el código de la empresa donde trabajo actualmente:
important.png

BEM

Genial

Buena información! 😃

BEM (bloque, elemento, modificador) Esta “nomenclatura” permite dar mayor organización y disminuir lineas de código.

5. Metodologías para estructurar código:

Son sistemas preestablecidos bien documentados para optimizar el código de cierta manera, evitar usar !important y también ayuda a solucionar problemas de manejo en sistemas grandes y complejos.

Hay: SMACSS, BEM, Atomic CSS, OOCSS.

Les comparto una foto actualizada del State of CSS 2020: Methodologies (la foto de la clase es del 2019):

Y tal como pueden ver, en orden, lo más usado es:

  1. BEM
  2. Atomic CSS
  3. OOCSS
  4. SMACSS
  5. ITCC
  6. Y uno nuevo llamado Cube CSS
    state of css methodologies.png
    Nota: Sí, entre 2019 y 2020 el orden no ha cambiado, pero sí los porcentajes 😃.

Chicos para entender mejor la metodología de BEM les dejo este blog de la profe Teff. Bem y el cohete de Spacex, Falcon 9

Ventajas de utilizar metodologías en CSS

.

  • Evitas redundancia en el código
  • Todas las personas que trabajan en el proyecto siguen los mismos parámetros y no hay múltiples versión de un mismo elemento (como un botón).
  • Evita conflictos en el código y desperdicio del mismo
  • Es una parte de la optimización del código

.
La metodología mas utilizada es la BEM y esta es mas o menos algo así:

Block-Element-Modifier

En donde a los nombres de las clases se les va a agregar primero el Bloque, después el Elemento y al final el Modifier (este ultimo a veces no es necesario).
.
Por ejemplo, el nombre de la clase de un párrafo dentro de una sección, solo seria class="section-p", en este caso no se le agrega modifier porque eso solo si hay dos o mas párrafos con características distintas.

Notas de la clase
Captura de pantalla 2021-05-25 205300.png

bem se me hace muy facil de usar

stateofcss2020.PNG

Estado de css. Actualmente sigue siendo BEM el mas utilizado, pero con mas satisfaccion es Atomic CSS

Estado de css

Creo que la mas conocida es BEM

d

Buen contenido, gracias por compartirlo.

Excelente, vamos bien 😃

Genial

Interesante clase. Además, tenemos que pensar que todavía le vamos a agregar Javascript, animaciones, que sea responsive…etc.

Super bueno saber estas metodologias

también hay un State of sobre Js
https://2019.stateofjs.com/

muy interesante el aporte de las Tendencias.
Muchas gracias

Metodologías más utilizadas:
SMACSS
BEM (La que vamos a utilizar)
Atomic CSS
OOCSS

Usar estás metodologías te van a salvar de mucho desorden al momento de escribir código. Es una excelente practica usarlos.

BEM

Cuando el profe se acuerda de casos en donde problemas reales se solucionaron con lo que estamos viendo me parece una muy buena forma de aterrizar conceptos.
😄

Cuando estamos escribiendo CSS podemos ver que en los primeros días del proyecto todo va bien, pero cuando el proyecto crece o lo dejamos por algún tiempo, lo más probable es que olvidemos cómo funciona nuestro código y no entenderemos ese mismo código

Para resolver este tipo de problemas, la comunidad de CSS ha creado múltiples metodologías que nos ayudarán a crear un código mejor que sea escalable, limpio y efectivo.

estupendo sigamos 😄

BEM es genial!!

Excelente información, nunca había manejado. Gracias por la información.

No existe una formula perfecta y en ocaciones tener demasiadas reglas no suele ser bueno, lo mejor es trabajar con lo que te sientes mas cómodo y adaptar las reglas a tus necesidades.
Finalmente, sin importar la metodología css que elijas para utilizar en tus proyectos, adoptar una, siempre te dará el beneficio de tener CSS y UI mejor estructurados.
En proyectos reales debemos adaptarnos al que hayan elegido anteriormente, así que es bueno conocer un poco de todos.

pues a aprender BEM, tengo conceptos básicos de la metodologia pero no la he utilizado.

Maravilloso :3 ❤️

Las metodologias o arquitecturas CSS nos permiten tener un código que sea predecible, reutilizable, mantenible y escalable que son las cuatros características de una arquitectura optima si queremos darle una buena experiencia la usuario ademas de que nuestros productos puedan llegar a muchas más personas.

De acuerdo a la encuesta State of CSS 2020, la metodología Atomic CSS está ganando mayor popularidad.

Les dejo la web para que puedan revisarlo.

https://2020.stateofcss.com/es-ES/technologies/methodologies/

Creo que es hora de aplicar la metodología BEM por fin

Son sistemas preestablecidos, formales y bien documentados, que te ayudan a escribir y organizar código mantenible y escalable en sistemas grandes y complejos.

Ventajas
Evitar redundancia y poder rear código escalable y reutilizable
Evitar el mal uso de propiedades como !important
Solucionar problemas de manejo en sistemas grandes y complejos.

Un código limpio es la mejor forma de ayudar a tu yo del futuro.

Llevo bastante tiempo programando y no conocía este tema, gracias.


CSS Rankings

Hay muchas naming conventions que puedes utilizar para nombrar a tus elementos y evitar la especificidad, la más popular es BEM, pero a continuación anexo algunos otros para que elijan

Metodologías para estructurar tu HTML+CSS (con naming conventions):

Me parece bastante útil e interesante que se brinden ejemplos basados en experiencias vividas por el instructor, nos sera de mucha utilidad para que los que estamos ingresando al mundo del desarrollo para que al momento de entrar al mundo real, lo hagamos de una forma mucho mas profesional. Bien Platzi!.

BEM y Atomic CSS 🔥

css_methodologies_experience_ranking.png

☝ Este es el estado de las 🟢metodologías de CSS que debemos de tener en cuenta para este año 2021

Existe algún link, con las tendencias actualizadas 2020?

Personalmente BEM es la mejor porque se hace muy explicita

Así es el código de la empresa donde trabajo actualmente:
important.png

BEM

Genial

Buena información! 😃

BEM (bloque, elemento, modificador) Esta “nomenclatura” permite dar mayor organización y disminuir lineas de código.

5. Metodologías para estructurar código:

Son sistemas preestablecidos bien documentados para optimizar el código de cierta manera, evitar usar !important y también ayuda a solucionar problemas de manejo en sistemas grandes y complejos.

Hay: SMACSS, BEM, Atomic CSS, OOCSS.

Les comparto una foto actualizada del State of CSS 2020: Methodologies (la foto de la clase es del 2019):

Y tal como pueden ver, en orden, lo más usado es:

  1. BEM
  2. Atomic CSS
  3. OOCSS
  4. SMACSS
  5. ITCC
  6. Y uno nuevo llamado Cube CSS
    state of css methodologies.png
    Nota: Sí, entre 2019 y 2020 el orden no ha cambiado, pero sí los porcentajes 😃.

Chicos para entender mejor la metodología de BEM les dejo este blog de la profe Teff. Bem y el cohete de Spacex, Falcon 9

Ventajas de utilizar metodologías en CSS

.

  • Evitas redundancia en el código
  • Todas las personas que trabajan en el proyecto siguen los mismos parámetros y no hay múltiples versión de un mismo elemento (como un botón).
  • Evita conflictos en el código y desperdicio del mismo
  • Es una parte de la optimización del código

.
La metodología mas utilizada es la BEM y esta es mas o menos algo así:

Block-Element-Modifier

En donde a los nombres de las clases se les va a agregar primero el Bloque, después el Elemento y al final el Modifier (este ultimo a veces no es necesario).
.
Por ejemplo, el nombre de la clase de un párrafo dentro de una sección, solo seria class="section-p", en este caso no se le agrega modifier porque eso solo si hay dos o mas párrafos con características distintas.

Notas de la clase
Captura de pantalla 2021-05-25 205300.png

bem se me hace muy facil de usar

stateofcss2020.PNG

Estado de css. Actualmente sigue siendo BEM el mas utilizado, pero con mas satisfaccion es Atomic CSS

Estado de css

Creo que la mas conocida es BEM

d

Buen contenido, gracias por compartirlo.

Excelente, vamos bien 😃

Genial

Interesante clase. Además, tenemos que pensar que todavía le vamos a agregar Javascript, animaciones, que sea responsive…etc.

Super bueno saber estas metodologias

también hay un State of sobre Js
https://2019.stateofjs.com/

muy interesante el aporte de las Tendencias.
Muchas gracias

Metodologías más utilizadas:
SMACSS
BEM (La que vamos a utilizar)
Atomic CSS
OOCSS

Usar estás metodologías te van a salvar de mucho desorden al momento de escribir código. Es una excelente practica usarlos.

BEM

Cuando el profe se acuerda de casos en donde problemas reales se solucionaron con lo que estamos viendo me parece una muy buena forma de aterrizar conceptos.
😄

Cuando estamos escribiendo CSS podemos ver que en los primeros días del proyecto todo va bien, pero cuando el proyecto crece o lo dejamos por algún tiempo, lo más probable es que olvidemos cómo funciona nuestro código y no entenderemos ese mismo código

Para resolver este tipo de problemas, la comunidad de CSS ha creado múltiples metodologías que nos ayudarán a crear un código mejor que sea escalable, limpio y efectivo.

estupendo sigamos 😄

BEM es genial!!

Excelente información, nunca había manejado. Gracias por la información.

No existe una formula perfecta y en ocaciones tener demasiadas reglas no suele ser bueno, lo mejor es trabajar con lo que te sientes mas cómodo y adaptar las reglas a tus necesidades.
Finalmente, sin importar la metodología css que elijas para utilizar en tus proyectos, adoptar una, siempre te dará el beneficio de tener CSS y UI mejor estructurados.
En proyectos reales debemos adaptarnos al que hayan elegido anteriormente, así que es bueno conocer un poco de todos.

pues a aprender BEM, tengo conceptos básicos de la metodologia pero no la he utilizado.

Maravilloso :3 ❤️

Las metodologias o arquitecturas CSS nos permiten tener un código que sea predecible, reutilizable, mantenible y escalable que son las cuatros características de una arquitectura optima si queremos darle una buena experiencia la usuario ademas de que nuestros productos puedan llegar a muchas más personas.

De acuerdo a la encuesta State of CSS 2020, la metodología Atomic CSS está ganando mayor popularidad.

Les dejo la web para que puedan revisarlo.

https://2020.stateofcss.com/es-ES/technologies/methodologies/

Creo que es hora de aplicar la metodología BEM por fin

Son sistemas preestablecidos, formales y bien documentados, que te ayudan a escribir y organizar código mantenible y escalable en sistemas grandes y complejos.

Ventajas
Evitar redundancia y poder rear código escalable y reutilizable
Evitar el mal uso de propiedades como !important
Solucionar problemas de manejo en sistemas grandes y complejos.

Un código limpio es la mejor forma de ayudar a tu yo del futuro.

Llevo bastante tiempo programando y no conocía este tema, gracias.