{"id":2151,"date":"2021-04-28T21:16:19","date_gmt":"2021-04-29T02:16:19","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=2151"},"modified":"2024-11-01T11:22:11","modified_gmt":"2024-11-01T16:22:11","slug":"buenas-y-malas-practicas-diseno-css","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/buenas-y-malas-practicas-diseno-css\/","title":{"rendered":"Buenas y malas pr\u00e1cticas en el dise\u00f1o CSS"},"content":{"rendered":"<p>CSS es uno de los lenguajes utilizados en la producci\u00f3n de recursos en l\u00ednea. Junto al HTML y JavaScript, conforma la triada de lenguajes del lado del cliente.<\/p>\n<p>Por cierto, CSS es la sigla de \u201c<em>Cascading Style Sheets<\/em>\u201d, que se traduce al espa\u00f1ol como \u201cHojas de estilos en cascada\u201d.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>\u00bfQu\u00e9 es CSS?<\/h2>\n<p>En palabras sencillas, el <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a> permite definir la apariencia visual de un documento HTML.<\/p>\n<p>As\u00ed, desde este conjunto de instrucciones es posible especificar la familia tipogr\u00e1fica de los p\u00e1rrafos, el color de los encabezados, el tama\u00f1o de las secciones y la disposici\u00f3n de la p\u00e1gina en diferentes pantallas, entre muchas otras propiedades.<\/p>\n<p>Para conocer m\u00e1s sobre este lenguaje te invito a revisar <a href=\"https:\/\/www.youtube.com\/channel\/UCqK3M5BtVsowkv0FD-yWY7A?sub_confirmation=1\">mi canal e-Lexia.com<\/a>, donde hay varios recursos sobre el tema.<\/p>\n<h2>Buenas pr\u00e1cticas de producci\u00f3n<\/h2>\n<p>Sin lugar a duda, la mejor pr\u00e1ctica es estudiar a profundidad el lenguaje y, al momento de dise\u00f1ar, tener a la mano un diccionario. En mi caso, utilizo la biblioteca <a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" rel=\"noopener\" target=\"_blank\">W3Schools<\/a>, donde encuentro la documentaci\u00f3n completa sobre el est\u00e1ndar.<\/p>\n<p>Sin embargo, hay situaciones donde estos recursos no entregan respuesta a otras consideraciones, como los tiempos de respuesta, la gesti\u00f3n de conocimiento y los flujos de trabajo. Y aqu\u00ed es donde entra la experiencia que han logrado dise\u00f1adores y desarrolladores web.<\/p>\n<p>Aportando un poco al tema, menciono algunas buenas pr\u00e1cticas CSS.<\/p>\n<h3>CSS para cada tipo de pantalla<\/h3>\n<p>Utilizando la consulta de medios (<em>media query<\/em>) es posible definir las diferentes reglas y declaraciones CSS que se aplicar\u00e1n en el sitio web, de acuerdo con la pantalla donde se est\u00e1 visualizando.<\/p>\n<p>Una pr\u00e1ctica com\u00fan es llevar todos los <em>media queries<\/em> a un \u00fanico archivo. Esto est\u00e1 bien para sitios web peque\u00f1os, pero \u00bfqu\u00e9 sucede en proyectos donde las reglas superan las 5000 l\u00edneas, por ejemplo? Esta situaci\u00f3n dificulta la gesti\u00f3n gr\u00e1fica y genera archivos de mayor peso.<\/p>\n<p>Una recomendaci\u00f3n es definir archivos CSS por cada una de las consultas.<\/p>\n<p>En otras palabras, por ejemplo, si el sitio web define tres <em>medias queries<\/em> viene bien crear tres archivos CSS, que podr\u00edan llamarse:<\/p>\n<ul>\n<li>movil.css<\/li>\n<li>tableta.css<\/li>\n<li>escritorio.css<\/li>\n<\/ul>\n<p>Con esto, la consulta no se realiza desde un archivo general, que contiene todas las declaraciones (se usen o no), sino que la p\u00e1gina web, de acuerdo con el dispositivo, solicita un archivo espec\u00edfico, m\u00e1s liviano y con las instrucciones precisas.<\/p>\n<p>Siguiendo el ejemplo anterior, el c\u00f3digo HTML que se inserta en el <code>HEAD<\/code> de cada p\u00e1gina es similar a:<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\" media=\"(max-width: 480px)\"\r\nhref=\"movil.css\" \/&gt;<br \/>\r\n&lt;link rel=\"stylesheet\" media=\"(max-width: 768px)\"\r\nhref=\"tableta.css\" \/&gt;<br \/>\r\n&lt;link rel=\"stylesheet\" media=\"(min-width: 769px)\"\r\nhref=\"escritorio.css\" \/&gt;\r\n<\/pre>\n<h3>Aprovechar el comportamiento en cascada<\/h3>\n<p>Una caracter\u00edstica fundamental de este lenguaje es la herencia de las reglas. Esta consiste en recuperar instrucciones que se han definido con anterioridad en elementos similares o superiores al que se est\u00e1 marcando.<\/p>\n<p>Por ejemplo, si se define una familia tipogr\u00e1fica Arial para el <code>BODY<\/code> no es necesario definir la misma declaraci\u00f3n para los p\u00e1rrafos, si es que estos utilizan el mismo tipo de letra. Esto agiliza la gesti\u00f3n de estilos y disminuye el peso de los archivos.<\/p>\n<p>Un c\u00f3digo de ejemplo:<\/p>\n<pre>\r\nh1 {\r\n  color:#222222;\r\n  font-family: Arial, sans-serif;\r\n  font-size:24px;\r\n}\r\n\r\np {\r\n  color: #222222;\r\n  font-family: Arial, sans-serif;\r\n  font-size:16px;\r\n}\r\n<\/pre>\n<p>Puede optimizarse as\u00ed:<\/p>\n<pre>\r\nbody {\r\n  color: #2222222;\r\n  font-family: Arial, sans-serif;\r\n  font-size:62.5%;\r\n}\r\n\r\nh1 {\r\n  font-size:2.4rem;\r\n}\r\n\r\np {\r\n  font-size:1.6rem;\r\n}\r\n<\/pre>\n<p>Aqu\u00ed es importante tener claridad, adem\u00e1s, sobre el concepto <em>mobile first<\/em>.<\/p>\n<h3>Documentar con comentarios<\/h3>\n<p>Independiente si el dise\u00f1o es para un proyecto propio o de un tercero, siempre viene bien comentar las l\u00edneas de c\u00f3digo m\u00e1s relevantes.<\/p>\n<p>Los comentarios permiten la gesti\u00f3n de conocimiento y evitan errores en el futuro.<\/p>\n<p>Personalmente, utilizo comentarios sobre reglas CSS que no domino al 100%, como las propiedades de animaci\u00f3n.<\/p>\n<p>Para lograr un comentario solo hace falta utilizar <code>\/*<\/code> al inicio del mensaje y <code>*\/<\/code> al final de este.<\/p>\n<pre>\r\n\r\nh1 {\r\n  color: #ff0033; \/* Responde a la campa&ntilde;a del mes *\/\r\n  font-weight:600px;\r\n  text-align:center;\r\n}\r\n\r\n<\/pre>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/p>\n<\/div>\n<\/div>\n<h2>Malas pr\u00e1cticas de producci\u00f3n<\/h2>\n<p>No es un secreto que, en muchas ocasiones, el dise\u00f1o CSS puede ocasionar frustraci\u00f3n y rechazo, especialmente en sitios web que utilizan numerosas reglas y el comportamiento en cascada comienza a \u201cdesbordarse\u201d.<\/p>\n<p>En medio de esos sentimientos negativos se aplican malas pr\u00e1cticas, bajo la excusa: \u201c<em>soluciono con esto, pero m\u00e1s adelante regreso a corregir<\/em>\u201d. Y ah\u00ed, precisamente, comienzan las imprecisiones.<\/p>\n<p>Miremos algunas acciones a evitar:<\/p>\n<h3>Abusar del ID<\/h3>\n<p>El atributo <code>id<\/code> se utiliza para marcar como \u00fanico un elemento de la p\u00e1gina web. Esta t\u00e9cnica es com\u00fan en estructuras de programaci\u00f3n, donde se requiere que una pieza espec\u00edfica (por ejemplo, un bot\u00f3n) asuma una instrucci\u00f3n puntual.<\/p>\n<p>A trav\u00e9s de CSS es posible aprovechar esta marca para identificar y dar apariencia a un elemento. Sin embargo, no es buen consejo utilizar esta t\u00e9cnica, excepto si hay una correcta gesti\u00f3n de los identificadores \u00fanicos, estos se repiten en varias p\u00e1ginas con comportamientos iguales, y los equipos de dise\u00f1o y desarrollo tienen claridad sobre el tema.<\/p>\n<p>El punto es que las hojas de estilo en cascada tienen mayor valor cuando una regla puede aplicarse a m\u00e1s de un elemento HTML. \u00a1Esa es la gracia del lenguaje! Si se define una regla tipo id para un solo elemento, se est\u00e1 perdiendo el potencial del CSS.<\/p>\n<p>Sin embargo, y lo menciono desde mi experiencia, hay momentos donde es necesario, especialmente en desarrollos de terceros.<\/p>\n<h3>Estilos a nivel de documento y l\u00ednea<\/h3>\n<p>En l\u00ednea con lo anterior, una mala pr\u00e1ctica es definir estilos CSS a nivel de documento o, peor a\u00fan, por etiqueta HTML.<\/p>\n<p>El valor del CSS es lograr separar la gesti\u00f3n gr\u00e1fica de la estructura sem\u00e1ntica del documento. As\u00ed, si en alg\u00fan momento se requiere ajustar la apariencia del sitio web no hay necesidad de afectar los contenidos.<\/p>\n<p>Para dejar claridad en este punto, y recurriendo a una situaci\u00f3n exagerada, imagine que todos los p\u00e1rrafos del sitio web son similares a:<\/p>\n<pre>\r\n&lt;p style=\"color:#333333;font-family:Arial; font-size:16px;text-align:left\"&gt;\r\nHola, mundo!\r\n&lt;\/p&gt;\r\n&lt;p style=\"color:#333333;font-family:Arial; font-size:16px;text-align:left\"&gt;\r\nSegunda l&iacutenea\r\n&lt;\/p&gt;\r\n&lt;p style=\"color:#333333;font-family:Arial; font-size:16px;text-align:left\"&gt;\r\nTercera l&iacutenea\r\n&lt;\/p&gt;\r\n<\/pre>\n<p>Y le piden cambiar el color <code>#333333<\/code> por <code>#343434<\/code>. \u00bfNo es m\u00e1s f\u00e1cil tener un archivo CSS externo que gestione todos los p\u00e1rrafos?<\/p>\n<h3>Declaraci\u00f3n !important<\/h3>\n<p>Y profundizando a\u00fan m\u00e1s, est\u00e1 la declaraci\u00f3n <code>!important<\/code>.<\/p>\n<p>Esta permite es ignorar cualquier instrucci\u00f3n previa, independiente si est\u00e1 en un CSS externo, en el <code>HEAD<\/code> o a nivel de l\u00ednea HTML.<\/p>\n<p>Con <code>!important<\/code> se est\u00e1 forzando al navegador a definir una declaraci\u00f3n CSS.<\/p>\n<p>Su uso puede dificultar la gesti\u00f3n futura de los estilos y, cuando menos, demuestra errores en la construcci\u00f3n sem\u00e1ntica de los documentos.<\/p>\n<p>Personalmente, esta declaraci\u00f3n la utilizo como \u00faltimo recurso y en productos de terceros. Cuando se trata de dise\u00f1os propios, para m\u00ed, es evidencia que algo estoy haciendo mal.<\/p>\n<h3>Invitaci\u00f3n<\/h3>\n<p>Existen muchas m\u00e1s recomendaciones sobre la producci\u00f3n. Espero regresar pronto con otra lista.<\/p>\n<p>Por lo pronto, te invito a dejar algunos consejos o situaciones que puedan ampliar el conocimiento y la gesti\u00f3n de estilos CSS en un sitio web. \u00a1La caja de comentarios espera por ti!<\/p>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>CSS es uno de los lenguajes utilizados en la producci\u00f3n de recursos en l\u00ednea. Junto al HTML y JavaScript, conforma la triada de lenguajes del lado del cliente. Por cierto, CSS es la sigla de \u201cCascading Style Sheets\u201d, que se traduce al espa\u00f1ol como \u201cHojas de estilos en cascada\u201d. \u00bfQu\u00e9&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,44],"class_list":["post-2151","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-seo","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/2151","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=2151"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/2151\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=2151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=2151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=2151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}