EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            prefijos css de los navegadores
            Prefijos CSS de los navegadores
            12/10/2019
            Modelo de cajas margenes relleno bordes
            Modelo de cajas: márgenes, relleno y bordes
            12/10/2019

            Buenas prácticas CSS

            Buenas prácticas CSS

            Buenas prácticas CSS

            Tabla de contenidos

            • 12. Buenas prácticas CSS
            • 1. Organizar la estructura de arriba hacia abajo
            • 2. Nombrar correctamente los selectores
            • 3. Separar las palabras mediante guiones o mediante mayúsculas
            • 4. Legibilidad
            • 5. Combinar elementos
            • 6. Utilizar selectores descendientes
            • 7. Utilizar propiedades abreviadas
            • 8. Utilizar nombres descriptivos en los selectores
            • 9. Evitar utilizar como nombre de un selector una característica visual
            • 10. Probar el diseño en los diferentes navegadores
            • 11. Validar el código CSS
            • 12. Agregar los prefijos de los navegadores en propiedades que no sean estables

            12. Buenas prácticas CSS

            Seguir unas pautas a la hora de crear estilos CSS hace que el código sea más claro y legible tanto para nosotros como para otros desarrolladores que deban trabajar en el proyecto. 

            Aunque no hay definido ningún estándar al respecto, es recomendable seguir las siguientes recomendaciones para conseguir un desarrollo lo más entendible posible.

            1. Organizar la estructura de arriba hacia abajo

            Con el fin de encontrar rápidamente cualquier parte de código, es recomendable organizar los estilos de arriba hacia abajo.

            /****** generic classes*******/
            styles goes here…
            /****** header *******/
            styles goes here…
            /****** nav menu *******/
            styles goes here…
            /****** main content *******/
            styles goes here…
            /****** footer *******/

            2. Nombrar correctamente los selectores

            Para conseguir más claridad en el código y soporte en todos los navegadores conviene no comenzar el nombre de los selectores con mayúsculas, números ni caracteres especiales.

            Evitar: #1div, .=div, DivContent 

            Mejor utilizar: #div1, .div, divContent

            3. Separar las palabras mediante guiones o mediante mayúsculas

            Es recomendable escoger una única manera de escribir el nombre de los selectores. Además, es mejor no usar guiones bajos “_” u otros caracteres especiales ya que algunos navegadores no los soportan. Conviene seguir alguna de las siguientes opciones:

            /* Opción 1: Palabras separadas por mayúsculas */
            navMenu { padding: 2em; border: 2px solid green; }
            
            /* Opción 2: Palabras separadas por guiones */
            nav-menu { padding: 2em; border: 2px solid green; }

            4. Legibilidad

            Adopta una única forma de escribir tu código para que sea más fácil de mantener y de encontrar cualquier elemento.

            /* Opción 1: Estilos en una línea */
            .nav-menu { padding: 2em; border: 2px solid green; }
            
            /* Opción 2: Cada estilo en una línea */
            .nav-menu { 
                  padding: 2em; 
                  border: 2px solid green; 
            }

            5. Combinar elementos

            Cuando varios elementos disponen de las mismas propiedades es recomendable compartirlas en vez de volver a repetir el código. Para ello podemos utilizar selectores combinados, tal y como hemos visto anteriormente.

            h1, h2, h3 { font-family: Arial; font-weight: 700;  }

            6. Utilizar selectores descendientes

            Es conveniente utilizar selectores descendientes siempre que sea posible antes de crear un selector clase o un selector identificador. De esta forma, el código estará más limpio, dispondrá de menos selectores clase e identificador y se comprenderá mucho mejor.

            div p {  color: red; }

            7. Utilizar propiedades abreviadas

            Siempre que sea posible es recomendable utilizar clases abreviadas para conseguir una reducción de código.

            /* Propiedades margin-left, margin-right y margin-top */
            .nav-menu {margin-left: 5px; margin-right: 5px; margin-top: 5px;}
            /* Propiedad abreviada margin */
            .nav-menu {margin: 5px 5px 0px 5px;}

            8. Utilizar nombres descriptivos en los selectores

            Mediante la utilización de nombres que permitan averiguar fácilmente a qué elemento le estamos dando estilo comprenderemos el código fácilmente.

            .nav-button { background: blue; } /* Estilo del botón de la navbar*/

            9. Evitar utilizar como nombre de un selector una característica visual

            Al utilizar en el nombre de un selector una característica visual como el color, el tamaño o la posición, si posteriormente modificamos esa característica, también deberíamos cambiar el nombre del selector. Esto complica mucho el código ya que tendríamos que actualizar todas las referencias a ese selector en el código HTML.

            /* Selector con nombre que define la característica visual del color */
            .menu-red { background: red; }
            /* Utilizar mejor: */
            .nav-menu { background: red; }
            

            10. Probar el diseño en los diferentes navegadores

            Para descubrir si se producen errores de visualización en los navegadores lo recomendable es instalarlos todos en el equipo. Algunos de los más utilizados son los siguientes:

            ChromeFirefoxOperaSafariMicrosoft Edge

            También puedes hacer uso de la aplicación browserling que te permite ver tu desarrollo en varias versiones diferentes de cada navegador. 

            11. Validar el código CSS

            Detectar errores en el código es esencial y se puede hacer fácilmente mediante un validador CSS. El W3C proporciona una herramienta de validación de CSS gratuita para los documentos CSS.

            validador CSS

            12. Agregar los prefijos de los navegadores en propiedades que no sean estables

            Para ahorrar tiempo y facilitarnos la tarea de incluir los prefijos de las propiedades CSS que todavía no son estables podemos hacer uso de la extensión «Autoprefixer» en Visual Studio Code.

            Compartir

            UD3. CSS básico

            • 1. ¿Qué es CSS?
            • 2. ¿Cómo aplicar estilos CSS?
            • 3. Selectores
            • 4. Unidades de medida
            • 5. Colores y fondo
            • 6. Propiedades de texto
            • 7. Propiedades de las fuentes
            • 8. Propiedades de las listas
            • 9. Propiedades de las tablas
            • 10. Pseudo-clases y pseudo-elementos en CSS
            • 11. Prefijos CSS de los navegadores
            • 12. Buenas prácticas CSS
            • 13. Modelo de cajas: márgenes, relleno y bordes
            • 14. Posición y comportamiento de contenedores en CSS
            • 15. Formatos de las fuentes en CSS y utilización de repositorios
            • 16. Estilos en formularios CSS
            • 17. Herramientas útiles, test de verificación y referencias
            • 18. Resumen CSS
            • 19. Prácticas CSS
            • 20. Test de conocimientos CSS
            • 21. Propiedades Personalizadas CSS

            Diseño de Interfaces Web

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results