{"id":12299,"date":"2021-07-09T06:07:09","date_gmt":"2021-07-09T06:07:09","guid":{"rendered":"https:\/\/www.xst.mx\/site\/?p=12299"},"modified":"2021-09-04T04:26:24","modified_gmt":"2021-09-04T04:26:24","slug":"5-cosas-sobre-css-que-me-hubiera-gustado-saber-cuando-era-principiante","status":"publish","type":"post","link":"https:\/\/www.xst.mx\/site\/desarrollo\/5-cosas-sobre-css-que-me-hubiera-gustado-saber-cuando-era-principiante\/","title":{"rendered":"5 cosas sobre CSS que me hubiera gustado saber cuando era principiante"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Durante los primeros d\u00edas del desarrollo de front-end, entre todos los problemas complejos y las soluciones que ofrece JavaScript (y sus marcos), muchos programadores tienden a subestimar el papel de CSS en un sitio web.
La raz\u00f3n es bastante simple: el CSS b\u00e1sico es f\u00e1cil de comprender y la mayor\u00eda de los obst\u00e1culos con los que se encuentra, puede encontrar la soluci\u00f3n en el desbordamiento de pila. Sin embargo, los problemas de CSS pueden volverse tediosos si el enfoque inicial es defectuoso y tambi\u00e9n pueden provocar que los sitios web de bajo rendimiento arruinen la experiencia del usuario.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

1. Herramientas para desarrolladores de navegadores<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Este puede parecer simple, pero tendemos a infrautilizar las herramientas de desarrollo cuando se trata de estilo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Depurar mejor<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Los estilos CSS se anulan varias veces en un sitio web complejo, especialmente si los nombres de las clases se reutilizan en diferentes lugares. Antes de buscar en el c\u00f3digo tratando de averiguar por qu\u00e9 el color de su bot\u00f3n no es rojo, inspecci\u00f3nelo. Le ahorrar\u00e1 mucho tiempo durante la depuraci\u00f3n.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Innovar sobre la marcha<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Dev Tools tambi\u00e9n te permite actualizar estilos sobre la marcha. \u00bfSe pregunta c\u00f3mo se ver\u00eda en azul? Bueno, ya no hay necesidad de preguntarse.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

2. Contenedores y clases reutilizables<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Esta pr\u00e1ctica, si se sigue, le ayudar\u00e1 a cosechar sus beneficios en los a\u00f1os venideros. El desarrollo de aplicaciones lleva tiempo para ir de principio a fin, y ning\u00fan dise\u00f1o permanece como estaba al principio.
Sin embargo, los componentes centrales se ver\u00edan iguales en diferentes p\u00e1ginas para mantener la coherencia, pase lo que pase.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Clases de reutilizaci\u00f3n<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Identifique los componentes que se reutilizan en toda la aplicaci\u00f3n (como, por ejemplo, botones, modales, encabezados, pies de p\u00e1gina, etc.) y escriba estilos para ellos primero. Reutilice estas clases donde lo necesite, de modo que incluso si el dise\u00f1o cambia, necesitar\u00eda ajustar el n\u00famero m\u00ednimo de l\u00edneas en su c\u00f3digo. De esta manera, se asegura de que su c\u00f3digo resista la prueba del tiempo.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t

Wrap para anular<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Puede haber situaciones en las que necesite cambiar algunas cosas en uno de sus componentes principales, solo para una p\u00e1gina espec\u00edfica. En tales casos, utilice la clase wrapper.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

3. Propiedad: Box sizing<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tbox-sizing determina c\u00f3mo se calcula la high y el width de su elemento. Uno de los m\u00e1s \u00fatiles es border-box, que calcula el ancho de un elemento considerando el content, el padding y el border-width.\nUn ejemplo podr\u00eda ayudar a aclarar la confusi\u00f3n.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

4. Enfoque centrado en los dispositivos m\u00f3viles<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t

Esto puede parecer un poco trivial al principio, pero resulta \u00fatil en el gran esquema de las cosas y es bastante f\u00e1cil de adaptar, si se convierte en una pr\u00e1ctica. La compatibilidad con dispositivos m\u00f3viles ocupa un lugar cada vez m\u00e1s alto en la lista de verificaci\u00f3n de todos los dise\u00f1adores web en este momento, y los desarrolladores tienen dos opciones: el escritorio primero y el m\u00f3vil primero.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t

Sin embargo, en el enfoque de escritorio primero, para un dispositivo m\u00f3vil, cargar\u00eda primero el CSS com\u00fan y luego anular\u00eda esos estilos despu\u00e9s de buscar en la consulta de medios. Sin embargo, para una computadora de escritorio, no se molestar\u00eda en mirar la consulta de medios en absoluto, lo que ahorra algo de tiempo de rendimiento.
Pero esta vez ser\u00eda m\u00e1s \u00fatil para un dispositivo m\u00f3vil que para una computadora de escritorio, ya que las computadoras de escritorio generalmente est\u00e1n mejor equipadas.
Por eso, se recomienda seguir un enfoque de m\u00f3vil primero desde el principio, aunque es comprensiblemente tentador ir primero al escritorio mientras se codifica.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t

5. !important NO es importante<\/h3>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tLa etiqueta !important puede parecer muy \u00fatil al principio. Como nuevo desarrollador, sol\u00eda usarlo cada vez que enfrentaba alg\u00fan desaf\u00edo, y todo sol\u00eda funcionar m\u00e1gicamente. La etiqueta !important esencialmente le dice al navegador que nunca permita que esta l\u00ednea de c\u00f3digo se anule.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\tSin embargo, en la mayor\u00eda de los casos, querr\u00e1 que se anule en un futuro cercano, y la \u00fanica forma de anular una !importante es utilizando otra. En poco tiempo, su hoja de estilo se llenar\u00e1 de !important, y eso le impedir\u00e1 reutilizar sus estilos. En lugar de utilizar el comod\u00edn, intente averiguar por qu\u00e9 no se aplica el estilo.\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Durante los primeros d\u00edas del desarrollo de front-end, entre todos los problemas complejos y las soluciones que ofrece JavaScript (y sus marcos), muchos programadores tienden a subestimar el papel de CSS en un sitio web.La raz\u00f3n es bastante simple: el CSS b\u00e1sico es f\u00e1cil de comprender y la mayor\u00eda de…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-12299","post","type-post","status-publish","format-standard","hentry","category-desarrollo"],"_links":{"self":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/comments?post=12299"}],"version-history":[{"count":6,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12299\/revisions"}],"predecessor-version":[{"id":12310,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/posts\/12299\/revisions\/12310"}],"wp:attachment":[{"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/media?parent=12299"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/categories?post=12299"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.xst.mx\/site\/wp-json\/wp\/v2\/tags?post=12299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}