Metodologías para estructurar código

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):

• BEM (Bloque, elemento, modificador)
• BEMIT (BEM + Triángulo invertido)
• ABEM (Atomic BEM)
• ITCSS (CSS de triángulo invertido)
• SMACSS
• ACSS (Atomic CSS)
• OOCSS (CSS orientado a objetos)
• AMCSS (Atribute Model CSS)
• SUIT CSS 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 🔥

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

https://platzi.com/blog/estado-css-2019/

actualmente

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

Esta es la pagina

https://2021.stateofcss.com/es-ES/conclusion/
Conclusión
Kilian Valkhof
@ kilianvalkhof
Desarrollador web y creador de Polypane
La forma de escribir CSS está a punto de cambiar para siempre

Desde hace muchos años, se han producido muchas innovaciones en los estilos de escritura para la web en otros lugares: en preprocesadores, marcos de JavaScript o compiladores. Sin duda, el propio CSS también ha recibido algunas mejoras como la relación de aspecto o las propiedades personalizadas . Sin embargo, todavía buscamos bibliotecas y otros ayudantes a diario.

Pero se avecina un cambio. El lenguaje CSS central se está sacudiendo y renovando, y estamos a la vanguardia de la evolución acelerada.

Container Queries traerá una era completamente nueva de diseño receptivo, y Cascade Layers hará que nuestro uso de marcos, tematización y administración de bases de código complejas sea significativamente más fácil.

Cuando miramos un poco más adelante, también podemos ver aparecer el condicional @ when / else , lo que nos permitirá combinar medios, contenedores y consultas de soporte en una sola regla at.

Y crucemos los dedos, 2022 es el año en que finalmente vemos algo de movimiento en el anidamiento de CSS nativo. Aquellos de nosotros que trabajamos con herramientas como Sass y PostCSS ya no podíamos imaginar otra forma de trabajar.

Todo esto en conjunto significa que es probable que 2022 sea un año en el que la forma de escribir CSS cambiará fundamentalmente. Es un período increíblemente emocionante y esperamos todas las increíbles implementaciones en el próximo año.

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

BEM

Personalmente BEM es la mejor porque se hace muy explicita

Dejo todos los temas que fui investigando a partir de este curso.
https://github.com/css-modules/css-modules
https://2020.stateofcss.com/es-ES/technologies/pre-post-processors/
https://2020.stateofcss.com/es-ES/technologies/css-frameworks/
https://2020.stateofcss.com/es-ES/technologies/methodologies/
https://2020.stateofcss.com/es-ES/technologies/css-in-js/
https://platzi.com/clases/postcss-2016/
Excelente sección donde hay varias pag para bichear (revisar) temas de CSS
https://2020.stateofcss.com/es-ES/resources/

En el curso definitivo de HTML y CSS el profesor Diego de Granda explica muy bien sobre el uso de la metodología BEM ✨

En fin, que el uso de metodologías apoyan el trabajo colaborativo, ahorran tiempo y dinero ❤️

Comparto link para que estemos actualizados sobre el Estado de CSS

Cabe mencionar que para el 2022 ya no se encuentra la gráfica de Metodologías pero me parece interesante para tener en cuenta al iniciar un proyecto nuevo

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

Notas de la clase

The State of CSS 2020

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

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

Genial

Buena información! 😃

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

Les dejo mis apuntes:

BEM es la mejor porque se hace muy explicita

Para que sirven las metodologías de CSS ?

Entender las metodologías al momento de escribir Código es probablemente es una de las mejores practicas que debemos seguir , ya que cuando trabajos en grandes equipos o incluso en un proyecto personal , tener claro estas metodologías harán que nuestro cogido se haga muchísimo mas legible y compresible para las Demas personas que vayan a leer nuestro código .

Algunas de estas metodologías son:

BEM (Bloque, elemento, modificador)
BEMIT (BEM + Triángulo invertido)
ABEM (Atomic BEM)
ITCSS (CSS de triángulo invertido)
SMACSS
ACSS (Atomic CSS)
OOCSS (CSS orientado a objetos)

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
   
   
   Nota: Sí, entre 2019 y 2020 el orden no ha cambiado, pero sí los porcentajes 😃.

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.

bem se me hace muy facil de usar

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.

https://2019.stateofcss.com/

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/

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.

https://2019.stateofcss.com/technologies/pre-post-processors/