{"id":11857,"date":"2021-10-25T11:05:40","date_gmt":"2021-10-25T09:05:40","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=11857"},"modified":"2021-11-08T20:19:41","modified_gmt":"2021-11-08T18:19:41","slug":"10-buenas-practicas-para-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2021\/10\/10-buenas-practicas-para-css\/","title":{"rendered":"10 Buenas Pr\u00e1cticas para CSS"},"content":{"rendered":"

\u00bfQu\u00e9 ser\u00edan 10 buenas practicas para CSS<\/strong>? Se escucha a menudo, m\u00e1s que todo en el mundo de la programaci\u00f3n :), que CSS es un lenguaje f\u00e1cil. Eso depende porque al igual que cualquier otro lenguaje, CSS tiene sus propios matices y funciones m\u00e1s complejas.<\/p>\n

En este articulo, veremos 10 practicas que os ayudaran a mejorar vuestros c\u00f3digos CSS para que sean m\u00e1s eficientes y mantenibles<\/strong>.<\/p>\n

\n

Tabla de Contenidos<\/strong><\/h3>\n
    \n
  1. Agrupar los selectores<\/a><\/li>\n
  2. Mantener ordenada las declaraciones<\/a><\/li>\n
  3. Buena sintaxis del c\u00f3digo<\/a><\/li>\n
  4. Reducir la redundancia de las propiedades<\/a><\/li>\n
  5. Evitar los selectores complejos<\/a><\/li>\n
  6. Utilizar las Propiedades Abreviadas<\/a><\/li>\n
  7. Implementar comentarios<\/a><\/li>\n
  8. Mobile-first<\/a><\/li>\n
  9. Utilizar Variables<\/a><\/li>\n
  10. Minimizar sus hojas de estilos<\/a><\/li>\n<\/ol>\n<\/article>\n

    1-Agrupar los selectores CSS<\/h2>\n

    Se agrupa selectores cuando comparten estilos. En vez de tener dos, tres o m\u00e1s reglas CSS que hacen lo mismo (establecer el color de algo en azul, por ejemplo), usa una sola regla CSS que logra lo mismo. El secreto de esta t\u00e1ctica para aumentar la eficiencia es la coma.<\/p>\n

    div, p { color: #0000ff; }\r\n<\/pre>\n
    En este contexto, una coma significa \u00aby\u00bb, por lo que este selector se aplica a todos los elementos de divisi\u00f3n y a todos los elementos de p\u00e1rrafo. Y podr\u00edas agrupar cualquier forma de selector con cualquier otro selector. Como por ejemplo:<\/p>\n
    p, .blue, #button, div a { color: #0000ff; }<\/pre>\n
    Cualquier selector se puede agrupar<\/h3>\n
    Puedes colocar cualquier selector v\u00e1lido en un grupo, y todos los elementos del documento que coincidan con todos los elementos agrupados tendr\u00e1n el mismo estilo en funci\u00f3n de esa propiedad de estilo.<\/p>\n
    Algunos dise\u00f1adores prefieren enumerar los elementos agrupados en l\u00edneas separadas para que el c\u00f3digo sea legible.<\/p>\n
    p,\r\n.blue,\r\n#button,\r\ndiv a { color: #0000ff; }\r\n<\/pre>\n
    Nota que la apariencia en el sitio web y la velocidad de carga siguen siendo las mismas.<\/p>\n
    \u00bfPor qu\u00e9 agrupar los selectores de CSS?<\/span><\/h3>\n
    Aunque las hojas de estilo no son los principales culpables de la carga lenta, agrupar selectores de CSS ayuda a minimizar el tama\u00f1o de su hoja de estilo para que se cargue m\u00e1s r\u00e1pido.<\/p>\n
    La agrupaci\u00f3n de selectores tambi\u00e9n facilita mucho el mantenimiento del sitio.\u00a0Si necesita hacer un cambio, simplemente puede editar una sola regla CSS en lugar de varias.\u00a0Este enfoque ahorra tiempo y molestias.<\/p>\n
    El resultado final: la agrupaci\u00f3n de selectores es una buena practica para CSS porque aumenta la eficiencia, la productividad, la organizaci\u00f3n y, en algunos casos, incluso la velocidad de carga.<\/p>\n
    2-Mantener ordenada las declaraciones es una de las buenas practicas para CSS<\/h2>\n
    No hay reglas estrictas por las declaraciones de propiedad pero para una buena organizaci\u00f3n del c\u00f3digo se pueden agrupar siguiendo el orden:<\/p>\n
      \n
    1. Posicionamiento<\/li>\n
    2. Display y Modelo de Caja (Box Model)<\/li>\n
    3. Texto \/ Tipograf\u00eda<\/li>\n
    4. Colores \/ Visual<\/li>\n
    5. Misc (Miscel\u00e1neos, a decir todas las dem\u00e1s propiedades)<\/li>\n<\/ol>\n
      .selector<\/span><\/span> {<\/span>\r\n   \u00a0 \/* Posicionamiento *\/ \r\n\u00a0 \u00a0 \u00a0position:<\/span> absolute;<\/span> \r\n\u00a0 \u00a0 \u00a0z-index<\/span>:<\/span> 10<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0top<\/span>:<\/span> 0<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0right<\/span>:<\/span> 0<\/span>;<\/span> \r\n\r\n  \u00a0  \/* Display & Box Model *\/<\/span>\r\n   \u00a0 display<\/span>:<\/span> inline-block;<\/span> \r\n\u00a0 \u00a0 \u00a0overflow<\/span>:<\/span> hidden;<\/span> \r\n\u00a0 \u00a0 \u00a0box-sizing<\/span>:<\/span> border-box;<\/span> \r\n\u00a0 \u00a0 \u00a0width<\/span>:<\/span> 100<\/span>px<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0height<\/span>:<\/span> 100<\/span>px<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0padding<\/span>:<\/span> 10<\/span>px<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0border<\/span>:<\/span> 10<\/span>px<\/span> solid #333<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0margin<\/span>:<\/span> 10<\/span>px<\/span>;<\/span> \r\n\r\n  \u00a0 \u00a0\/* Tipograf\u00eda *\/<\/span> \r\n\u00a0 \u00a0 \u00a0font-family<\/span>:<\/span> sans-serif;<\/span> \r\n\u00a0 \u00a0 \u00a0font-size<\/span>:<\/span> 16<\/span>px<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0line-height<\/span>:<\/span> 1.4<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0text-align<\/span>:<\/span> right;<\/span> \r\n\r\n  \u00a0 \u00a0\/* Visual y Colores*\/<\/span> \r\n\u00a0 \u00a0 \u00a0background<\/span>:<\/span> #000<\/span>;<\/span> \r\n\u00a0 \u00a0 \u00a0color<\/span>:<\/span> #fff;<\/span>\r\n\r\n  \u00a0 \u00a0\/* Misc & ... *\/<\/span> \r\n\u00a0 \u00a0 \u00a0cursor<\/span>:<\/span> pointer;\r\n     opacity: 0.9;\r\n}\r\n<\/span>\r\n<\/pre>\n
      Pero, \u00bfpor qu\u00e9 molestarse en agrupar y ordenar las propiedades CSS?\u00a0Bueno, creo que tiene sentido por dos razones.\u00a0La primera es que puede hacer que sea m\u00e1s r\u00e1pido escanear el CSS y encontrar lo que necesita.\u00a0La segunda es que si est\u00e1 trabajando en un entorno de equipo, puede facilitar el trabajo en CSS que tiene un estilo coherente sobre el arco.<\/p>\n
      3-Buena sintaxis del c\u00f3digo CSS<\/h2>\n