|
![]() |
|
![]() |
![]() |
#421 | |
Forocochia07
Oct 2008 | 951 Mens.
Lugar: Nevermind
|
Cita:
Opino igual y solo he visto algunos vídeos suyos en Youtube. Se lo ha montado bien para conseguir que la gente acabe comprando sus cursos. | |
![]() |
![]() |
![]() |
#422 | |
ForoCoches: Miembro
Sep 2014 | 434 Mens.
Lugar: un lugar llamado mundo
|
Me quedo por la plataforma! Soy Frontend con poca experiencia, trabajo con React aunque ahora me meten en un proyecto con Vue y meteré la cabeza en este Cita:
No he visto ningun tutorial suyo pero solo por lo poco que ví de él en YouTube no lo puedo recomendar, mucho ruido y pocas nueces creo yo... | |
Última edición por kidcudi fecha: 17-feb-2020 a las 16:26. |
||
![]() |
![]() |
![]() |
#423 | |
ForoCoches: Usuario
Ene 2015 | 121 Mens.
Lugar: El mundo
308 |
Cita:
![]() | |
![]() |
![]() |
![]() |
#424 | |
Animaciones y tips de CSS
Oct 2019 | 75 Mens.
|
Cita:
Hola shurmano! @ervadel Si, BEM se queda algo corto. Por ello, existe BEMIT CSS. BEMIT es BEM pero llevado un paso más allá. BEMIT aún tiene bloques, elementos y modificadores. Pero se le añaden prefijos y sufijos para organizar mejor tu código por capas. En esta metodología tienes esas clases "helpers" llamadas objetos, que es una capa en tu jerarquía de código CSS (y también tienes utilidades, otra capa pero más específica) Por ejemplo, para alinear un texto a la derecha podrías tener esta clase .o-text-align--right. También podrías tener clases para columnas. Por ejemplo esto: [email protected] O de objeto, te dice que es una clase "helper" y que se reutiliza en cualquier lugar, te avisa que tengas cuidado en modificar sus valores, ya que podría afectar a muchos lugares diferentes. @md quiere decir que ese estilo se está aplicando solo en tu media Query de @md, por ejemplo de 1100px a infinito. Los estilos de los componentes los tendrás en clases c-. C de componente. Una capa posterior a los objetos. Los componentes pueden machacar los estilos genéricos de los objetos, ya que están escritos después en tu organización de CSS. Además, todo se mantiene sin selectores anidados (de entrada) así que es fácil mantener tu código limpio. En mi canal de Youtube puedes verlo, todo mi código es con esta metodología. Predico con el ejemplo. Es útil y cómodo. Creo que si sabes BEM esto te va a gustar. Además he hecho un curso en udemy donde la explico al detalle, si te interesa te paso link por MP! Pasate por mi canal y si te convence la metodología, pruébalo! El canal está en el primer mensaje de este mismo hilo! Cualquier cosa comentamos. Un saludo! | |
Última edición por AnimatiCSS fecha: 17-feb-2020 a las 17:40. |
||
![]() |
![]() |
![]() |
#425 |
Forocochia07
Oct 2008 | 951 Mens.
Lugar: Nevermind
|
Corrígeme si me equivoco, pero ¿eso no acaba creando una cantidad de clases muy grande, realmente tiene sentido? Partiendo del caso que he comentado en el que la estructura y los estilos son idénticos, ¿por qué no llamar al componente block? De esta forma no es necesario tener prefijos. Al no haber usado BEMIT no veo los beneficios que puede tener. En el caso que comentas de tener una clase para alinear texto, ¿por qué no usar text--left o text--right, por ejemplo? Aunque en este caso text no tendría ningún efecto sobre el texto porque no se aplicarían cambios sobre el texto. ¿BEMIT previene el uso de falsos bloques que solo aplican modificadores? Otra cosa acerca de BEM, ¿no es un poco de que huele mal cuando el bloque se define con tres palabras? Para mi eso ya tiene pinta de que debería ser un segundo componete. Por ejemplo, tener un bloque user, y crear por ahí un user-block-data o algo por el estilo. |
![]() |
![]() |
![]() |
#426 | |
Animaciones y tips de CSS
Oct 2019 | 75 Mens.
|
Cita:
Paso a contestarte shur: Tendrás tantas variantes como tú quieras tener. Es decir, clases extra de "helpers". BEMIT es totalmente flexible. Quieres tener muchas clases helpers y seguir un principio de desarrollo basado en atomic CSS? Podrías. Tendrías que generarlas. Por ejemplo como te había dicho, para alinear textos. O quizás una para tratar las fuentes. Una para el típico container. Que ventaja te da usar prefijos? Para empezar si es un objeto sabrás su naturaleza global, puede ser reutilizado en diferentes lugares. Pero es que, BEMIT no solo es la capa de objetos, también tienes prefijos de estado (is-active por ejemplo), prefijos para JavaScript (js-) donde sabes que tu JavaScript está atacando ese nodo de alguna manera, una buena práctica para tener estilos y funcionalidad separados. Aunque por ejemplo yo, utilizo algunos helpers concretos. No género clases que no voy a usar. Bootstrap, por ejemplo, te da clases helpers (bastantes) y tú las utilizas si quieres. Si que es verdad que también puedes decirle cuales incluir y cuáles no. Ahora bien, BEMIT es mejor, porque? Por ejemplo te da más información. Una clase o- sabes que es menos específica (tiene menos fuerza de selector) que un componente. BEMIT además te organiza los archivos por capas (carpetas concretas). Dentro de un año, en una web que haya usado BEMIT, veo esta clase al inspeccionar el navegador ( sin ni siquiera entrar a los archivos ): c-form Sé que está su estilo definido en la carpeta components/c-form.scss Aunque pase un año, en menos de dos segundos puedes saber dónde está localizado todo su estilo de ese nodo. O quizás ves está clase: o-color--a por ejemplo Pues su estilo estará en objects/o-color.scss Pero es que eso solo es una de las características que te ofrece. El prefijo con clase o, te dice que esa clase se reutiliza en más sitios, no solo en un componente. Por lo que es más peligroso de editar ( puede dar problemas en cualquier otro lugar de tu web ) En mi vídeo de presentación del curso explico todo esto detalladamente, míratelo y si quieres seguimos comentando. | |
Canal de Youtube de AnimatiCSS
Animaciones y tips avanzados de CSS (y JavaScript!) |
||
![]() |
![]() |
![]() |
#427 |
ForoCoches: Miembro
Ago 2007 | 7.895 Mens.
Lugar: Madrid
Kia ceed 1.6 CVVT 126 |
@AnimatiCSS me interesa mucho tu opinión como pro en css, sass etc de styled components |
![]() |
![]() |
![]() |
#428 | |
Animaciones y tips de CSS
Oct 2019 | 75 Mens.
|
Cita:
| |
![]() |
![]() |
![]() |
#429 | |
ForoCoches: Miembro
Ago 2007 | 7.895 Mens.
Lugar: Madrid
Kia ceed 1.6 CVVT 126 |
Cita:
Qué ventajas le ves a cada aproximación si fueras a empezar un proyecto de 0? Por ejemplo Cabify, por lo que sé, ya trabajan con css in js. Saludos! | |
![]() |
![]() |
![]() |
#430 |
ForoCoches: Miembro
Sep 2014 | 434 Mens.
Lugar: un lugar llamado mundo
|
Y ya que se saca el tema de css, alguno por aquí que le de Tailwind? |
![]() |
![]() |
![]() |
#431 | |
Animaciones y tips de CSS
Oct 2019 | 75 Mens.
|
Cita:
Vale te comento. Yo he usado styled components, pero poco (en un proyecto que hice con React recientemente). La verdad, que no soy un experto con styled components, pero te comentaré con la experiencia que tengo: Tiene potencial efectivamente, pero quizás por mi manera de enfocar los proyectos, prefiero no utilizarlo. Escribir CSS-in-JS no me agrada, prefiero tener un archivo para los estilos con scss del propio componente. Sí, es cierto que styled components te da control sobre que estilos pintar en función de variables. Pero también está la opción de poner una clase de modificador (hablando de BEM por ejemplo) que edite los estilos de la clase "default". Quiero decir, podrías usar la librería classnames para eso por ejemplo: classnames js Y con ello podrías jugar también con las clases que acaba teniendo un nodo, la cual tiene los estilos en el scss, separado. Entonces machacar los estilos por defecto gracias a la clase que modifica esos estilos. Jugando bien la característica de la cascada de CSS. Por ejemplo Código:
.c-form{ color: black; } .c-form--alt{ color: white; } Además, tengo entendido que styled components te genera clases con nombres con hash, que no se repiten nunca (como si les añadiera un id especial en cada compilación al final de los nombres de tus clases). Esto te quitaría los problemas de no pisar un estilo de una clase con otro, ya que tus clases serán locales y únicas para cada componente. Pero esto no me acaba de gustar, aunque todo es probarlo y contrastarlo. Aún así, es algo muy potente, no estoy desmereciéndolo. Pero, dado mi gusto personal y donde me siento más cómodo, prefiero enfocarlo como te dije. Al final lo importante es utilizar lo que sea más cómodo para ti. Yo prefiero separar CSS del JS. Llámame romántico si quieres ![]() | |
![]() |
![]() |
![]() |
#432 | |
ForoCoches: Miembro
Ago 2007 | 7.895 Mens.
Lugar: Madrid
Kia ceed 1.6 CVVT 126 |
Cita:
Opinas igual que la maquetadora de mi equipo 😂 | |
![]() |
![]() |
![]() |
#433 |
ForoCoches: Miembro
Jul 2008 | 262 Mens.
|
¿Le habéis echado un vistazo al curso de Javascript por email de Dan Abramov? Todavía no sé si me gusta mucho o no, pero desde luego tiene una visión de lo más original. |
![]() |
![]() |
![]() |
#434 |
ForoCoches: Miembro
Ago 2007 | 7.895 Mens.
Lugar: Madrid
Kia ceed 1.6 CVVT 126 |
Yo he visto las dos primeras lecciones. Me mola cómo lo enfoca. |
![]() |
![]() |
![]() |
#435 | |
ForoCoches: Miembro
Jul 2008 | 262 Mens.
|
Cita:
Sí, la verdad es que como curso completista no sé como quedará, pero para solidificar los conceptos "tricky" desde un punto de vista original tiene buena pinta. Yo me he leído 3 y el tercero es el que más me ha gustado. | |
![]() |
![]() |
![]() |
#436 |
ForoCoches: Miembro
Jun 2015 | 7.522 Mens.
|
A mi me está encantando como explica. Me está sirviendo un montón para enseñar yo. |
![]() |
![]() |
![]() |
#437 |
ForoCoches: Miembro
Feb 2010 | 2.374 Mens.
Lugar: Al Sur, con la fresquita
Kia Sportage 1.7CRDi 115cv Kawasaki ER-6F |
Me quedo por aquí. Terminando DAW y espero poder dedicarme a la parte Front-end. Segun leo es preferible: React o Vue antes que Angular Laravel en PHP Saludos |
El rincón de corredor aficionado y profesional VOL.XL Socio Nº 1977
|
|
![]() |
![]() |
![]() |
#438 |
Abrázate a la locura
Ene 2009 | 11.368 Mens.
|
¿Dónde se encuentra? |
![]() |
![]() |
![]() |
#439 |
ForoCoches: Miembro
Jun 2015 | 7.522 Mens.
|
Te apuntas aquí https://justjavascript.com/ y de vez en cuando te manda emails. |
![]() |
![]() |
![]() |
#440 |
Forocochia07
Oct 2008 | 951 Mens.
Lugar: Nevermind
|
@AnimatiCSS, creo que me pasaré unos días leyendo cosas de ITCSS y BEMIT porque también al no haber usado esta forma de estructurar los estilos no termino de verlo con claridad. A ver si entre esta semana y la que viene me quedo un poco más claro y le veo sentido, así tal vez hasta pueda plantear usarlo en el proyecto en el que estoy ahora. También he estado viendo el curso de SMACCS en Frontend Masters y no termina de convencerme, tampoco parece que su uso esté muy extendido y que tiene más peso BEM que cualquiera de las otras alternativas. |
![]() |
![]() |
![]() |
#441 | |
ForoCoches: Usuario
Abr 2017 | 36 Mens.
|
Cita:
Muchas gracias!! | |
![]() |
![]() |
![]() |
#442 |
ForoCoches: Miembro
Dic 2018 | 1.021 Mens.
Lugar: Madrid
Opel Astra K |
Pillo sitio fullstack Aunk soy más de back |
![]() |
![]() |
![]() |
#443 | |
ForoCoches: Miembro
Oct 2019 | 459 Mens.
Lugar: Málaga
Kia Stonic |
Cita:
| |
![]() |
![]() |
![]() |
#444 |
Soy programador
Abr 2017 | 102 Mens.
|
Cojo sitio, licenciado en DAW, trabajando con Angular a día de hoy y con ganas de aprender React además de como hacer aplicaciones PWA y hacer buen uso del CSS y estructuración de paginas webs |
![]() |
![]() |
![]() |
#445 | |
Animaciones y tips de CSS
Oct 2019 | 75 Mens.
|
Cita:
@ervadel Claro shurmano ningún problema, si no lo ves claro no pasa nada. Cada uno tiene sus gustos y preferencias a la hora de desarrollar. Pero yo creo que si utilizas BEM, es muy posible que te interese BEMIT, bajo mi opinión personal. Yo creo que puede ayudarte! Te envío mp con información para si decides indagar un poco más | |
Última edición por AnimatiCSS fecha: 19-feb-2020 a las 18:40. |
||
![]() |
![]() |
![]() |
#446 | |
Abrázate a la locura
Ene 2009 | 11.368 Mens.
|
Cita:
| |
![]() |
![]() |
![]() |
#447 |
ForoCoches: Miembro
Jun 2015 | 7.522 Mens.
|
Muy buenas shures, estaba leyendo ESTE ARTÍCULO de Kent C. Dodds y me ha parecido muy interesante compartirlo por un lado y sobre todo dejar por aquí este estupendo diagrama que nos puede ayudar a decidir donde colocar el estado de nuestros componentes, algo que en ocasiones no es tan trivial como parece:![]() Espero que os sea útil. |
![]() |
![]() |
![]() |
#448 |
ForoCoches: Miembro
Jun 2012 | 4.743 Mens.
Lugar: Del sur
|
alguien usa haskell? |
![]() |
![]() |
![]() |
#449 |
ForoCoches: Miembro
Jun 2015 | 7.522 Mens.
|
Solo en la carrera. Tú lo usas?? Si es así, para qué?? Tengo un montón de curiosidad! |
![]() |
![]() |
![]() |
#450 | |
ForoCoches: Miembro
Jun 2012 | 4.743 Mens.
Lugar: Del sur
|
Cita:
Hola, 73nko. No lo uso, y tampoco lo he estudiado. Tambien tengo curiosidad porque he estado viendo ejemplos de codigo en haskell y me parece mas intuitivo por la sintaxis inspirada en notacion matematica. Ademas tiene un aire de misterio que atrae, no te lo voy a negar! Por reddit se mencionan frameworks para backend: scotty (similar a sinatra en rails), yesod y un par mas. Y para front-end tienes miso (https://haskell-miso.org/). Es lo unico que se sobre haskell. Ademas, es de proposito general. | |
![]() |
![]() |
![]() |
[ VERSIÓN MÓVIL ] |
Info Legal |
Privacidad |
Cookies |
Notificaciones | Normas de uso |
Updates | Ayuda | Invitaciones | Contacto
|