Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript

 

 

 

  • Implemente rápidamente. Implementar inteligentemente
  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. Evitar efectos secundarios no deseados
    2. Escribir código conveniente
      1. Demasiados parámetros
      2. Muy pocos parámetros
    3. Estilos resilientes de escritura
    4. Conclusión
      1. Lecturas adicionales sobre SmashingMag

    Muchos problemas con el diseño de sitios web, como efectos secundarios no deseados, actualizaciones dolorosas y código frágil, ocurren cuando no escribimos CSS con el mismo cuidado que usaríamos al escribir una función de JavaScript. Veamos cómo podemos tomar prestadas las mejores prácticas e ideas al escribir buenas funciones de JavaScript para escribir CSS.

     

    Me gusta pensar en escribir CSS, como escribir funciones que describen cómo responden sus diseños al cambio. Cuando olvidamos los principios para escribir una buena función, esto es algo de lo que puede suceder:

    • Perdemos tiempo.
      Cuando tenemos que preocuparnos por los efectos secundarios, los cambios tardan más.
    • Creamos errores.
      Mi ejemplo favorito es una tienda en línea donde los botones "Comprar" estaban ocultos debido al mal uso de las unidades de visualización.
    • Desarrollamos menos funciones.
      Cuando los cambios dan miedo y requieren mucho tiempo, a menudo no ocurren.

    Veamos cómo podemos tomar prestadas las mejores prácticas e ideas al escribir buenas funciones de JavaScript para escribir CSS que sea fácil de usar, libre de efectos secundarios no deseados y resistente al cambio.

    Evitar efectos secundarios no deseados

    Cuando cambia algo en su sistema, no debería cambiar algo más por sorpresa. Esto es tan cierto para CSS como para las funciones de JavaScript.

    Veamos este ícono de flecha en un círculo como ejemplo:

    ( Vista previa grande )

    Se ve bien, pero digamos que queremos un ícono de flecha más angosto:

    ( Vista previa grande )

    ¡Ahora el círculo que lo contiene está aplastado! Este es un ejemplo de un efecto secundario no deseado. Usar una flecha más estrecha arruina la forma del círculo.

    Si inspeccionamos el elemento en DevTools, podemos ver que la forma del círculo que lo contiene depende del tamaño del ícono interior y del relleno alrededor del ícono .

     

    ( Vista previa grande )

    Idealmente, el ícono interior no debería cambiar la forma del círculo que lo contiene. Aquí hay una demostración de cómo arreglar el ícono aplastado:

    Consulte el lápiz [Ejemplo de icono de flecha [bifurcado]] (https://codepen.io/smashingmag/pen/OJBpNMv) de Yaphi .

    Hay dos mejoras en este ejemplo:

    1. Las dimensiones del contenedor se han aislado del contenido.
      De esta manera, podemos usar diferentes íconos sin estropear el contenedor.
    2. El tamaño del contenedor se ha separado de la ubicación del icono.
      Debido a que hemos usado Flexbox para centrar el ícono horizontal y verticalmente, la posición del ícono no se alterará cuando cambie el tamaño del contenedor.

    Es posible que las mejoras en este ejemplo no sean buenas para todos los casos de uso. Por ejemplo, si necesita que la forma y el tamaño del contenedor cambien con el ícono interior, entonces la versión "antes" del código podría ser más adecuada para usted.

    Cuando digo evitar efectos secundarios no deseados , la palabra clave es "no deseado". ¡Algunos efectos secundarios son deseables! Por ejemplo, si tengo tres párrafos y agrego más texto al primero, me gustaría que el resto del contenido le haga espacio desplazándose hacia abajo en la página.

    Supongo que lo que estoy diciendo es que mi objetivo aquí no es dictar una forma específica de hacer las cosas. Mi esperanza es que usted considere qué efectos secundarios (anticipados y otros) podría encontrar y luego elija un curso de acción que se adapte a sus necesidades. Con demasiada frecuencia, buscamos soluciones publicadas para los problemas de otras personas sin tener en cuenta si ese código crea más problemas de los que resuelve.

    Escribir código conveniente

    Los parámetros de función en JavaScript proporcionan una manera conveniente de definir qué entradas desea controlar. Es como decidir qué mandos poner en un televisor.

    Podemos escribir CSS que sea igual de fácil de controlar. Para hacer eso, veamos cómo evitar dos problemas que podríamos encontrar al escribir una función de JavaScript:

    • Demasiados parámetros.
      Más configuraciones generan más gastos generales y se vuelven difíciles de usar.
    • No hay suficientes parámetros.
      Es posible que menos configuraciones no proporcionen suficiente control para sus casos de uso.

    Demasiados parámetros

    Supongamos que tenemos una función de JavaScript que enciende y apaga una bombilla. Si nuestro objetivo es hacer que la función sea lo más fácil de usar posible, probablemente querremos un parámetro que determine el estado de la bombilla.

     

    Aquí hay una función conveniente que es fácil de usar:

    switchLightbulb(ON);

    Compare eso con esta función dolorosamente compleja:

    switchLightbulb(getConnectedWires, isCompleteCircuit, setUpBattery, batteryStatus, isUsingWallOutlet, hasPowerOutage, isElectricityBillPaid, etc);

    En este caso, solo queremos encender la bombilla, pero cuando tenemos demasiados parámetros, tenemos muchos otros pasos que completar. Claro, todos esos otros parámetros son interesantes y pueden resultar útiles en algunas situaciones. O tal vez no. De todos modos, están fuera del alcance del objetivo esencial de la función: alternar entre un ONestado y un OFFestado. Pronunciacion de canciones

    Una idea similar se aplica a CSS. Digamos que tenemos una tarjeta con una imagen, texto de título, texto del cuerpo y un botón. Queremos cambiar fácilmente el ancho de la tarjeta.

    Este resumen es fácil de usar y comprender:

    .card { max-width: 300px;}

    Un enfoque mucho menos conveniente es definir explícitamente el max-widthde cada .cardcomponente:

    .card-image { max-width: 300px;}.card-title-text { max-width: 300px;}.card-body-text { max-width: 300px;}.card-button { max-width: 300px;}

    Si queremos cambiar el tamaño de la tarjeta en el segundo ejemplo, necesitamos realizar cuatro actualizaciones para lograr un cambio. Para nuestro caso de uso, es mucho más conveniente trabajar con el primer ejemplo.

    Muy pocos parámetros

    Ahora que hemos visto lo que puede salir mal con demasiados parámetros, veamos qué puede suceder con muy pocos . Imaginemos que tenemos una función que establece la velocidad de un automóvil y su ángulo de giro en grados. Necesitaremos al menos dos parámetros para esas propiedades.

    Nuestra función podría verse así:

    setCarState({ speed: 60, turnAngleDegrees: 2 });

    Podríamos intentar ser más concisos y combinar los parámetros:

    setCarState({ speedAndTurnAngle: 60 });

    Claro, eso es conciso, pero también aterrador de usar. ¡Imagínese un automóvil en el que al acelerar también se hace girar el volante! Definitivamente no queremos agrupar la velocidad y convertir el ángulo en un solo parámetro porque ese parámetro no proporciona suficiente control y produce efectos secundarios alarmantes.

    En CSS, existen casos similares en los que queremos controlar un parámetro sin afectar a otro. Por ejemplo, tal vez tengamos otro componente de la tarjeta, esta vez con una foto, un nombre, una breve biografía y un botón "Leer más", y queremos cambiar el ancho de la tarjeta sin que esto afecte las dimensiones de la foto.

    Desafortunadamente, el max-widthenfoque que utilizamos anteriormente en el contenedor de tarjetas proporcionará muy pocos parámetros para nuestras necesidades:

    .card { max-width: 300px;}

    Como señalamos antes, los elementos secundarios de la tarjeta se adaptarán al ancho del contenedor de la tarjeta hasta 300px. Eso incluye la imagen, que se reducirá a medida que el ancho del contenedor se reduzca debajo 300px.

    Lo que necesitamos es un parámetro más para la foto:

    .card { max-width: 300px;}.photo { width: max(150px, 50%);}

    Como queremos cambiar el ancho de la foto independientemente de la tarjeta, necesitamos suficientes parámetros para darnos ese nivel de control. En este caso, eso significa darle a la foto un ancho separado del de la tarjeta estableciendo ese ancho en una clase cuyo ámbito sea la foto.

     

    Ya sea que necesite más parámetros o menos, lo importante es considerar su caso de uso .

    Estilos resilientes de escritura

    Al escribir una función, es útil preguntar: ¿ Qué sucede con la salida cuando cambia la entrada?

    Podemos hacer variaciones de esa misma pregunta en CSS, como por ejemplo:

    • Si el ancho de un elemento está restringido, ¿qué sucede con su alto?
    • Si un elemento se desliza desde el costado de la ventana, ¿qué sucede con la accesibilidad de la página?
    • Si el usuario pasa del mouse al tacto, ¿qué sucede con las interacciones al pasar el mouse?

    Digamos que tenemos un diseño con tres tarjetas dispuestas horizontalmente en un contenedor.

    ( Vista previa grande )

    El CSS se instala max-width: 900pxen el contenedor y cada tarjeta tiene un pequeño respiro con padding: 5vw. Esto puede verse bien en la superficie, pero hay un problema: el contenedor tiene un límite superior mientras que el relleno no. A medida que la pantalla se hace más ancha, el contenido se aplasta.

    Consulte el Pen [Ejemplo de contenido aplastante con relleno [bifurcado]] (https://codepen.io/smashingmag/pen/RwepaQQ) de Yaphi .

    Las posibles soluciones incluyen:

    • Usar puntos de interrupción de ventana gráfica o contenedor para mantener el relleno bajo control,
    • Usar la función CSS min()para establecer un límite superior en el relleno, o
    • Usar unidades fijas, como píxeles, que no crecerán indefinidamente con la ventana.

    Lo que estas soluciones tienen en común es que tienen en cuenta lo que sucede cuando cambia el ancho de la ventana gráfica. De manera similar, podemos evitar muchos problemas de CSS si consideramos el diseño como salida y anticipamos lo que podría suceder cuando las entradas cambien.

    Ahmad Shadeed tiene un gran nombre para esta técnica: CSS Defensivo . La idea es que podemos “preparar los estilos para el futuro” al pensar en ellos como entradas que generan una interfaz de usuario y anticipar situaciones que disminuirían la usabilidad de la salida.

    Conclusión

    Codificar un diseño no se trata de disponer cosas en una página, sino de describir cómo responden al cambio . Por esa razón, es arriesgado tratar CSS como constantes en lugar de funciones.

    Afortunadamente, las mismas ideas que nos ayudan a escribir buenas funciones pueden ayudarnos a escribir un buen CSS, a saber:

    • Evite efectos secundarios no deseados.
    • Utilice los parámetros correctos.
    • Considere cómo los insumos cambian los productos.

    Lo que une estas ideas es una pregunta que espero que te hagas la próxima vez que escribas CSS: ¿ Cómo debería responder este diseño al cambio?

    Lecturas adicionales sobre SmashingMag

    • Cómo crear gráficos de anillos dinámicos con TailwindCSS y React , Paul Scanlon
    • Cómo crear un diseño de revista con áreas de cuadrícula CSS , Jennifer Brehm
    • Mejora tus habilidades CSS con el selector :has() , Stephanie Eckles
    • Funciones CSS menos conocidas e infrautilizadas en 2022 , Adrian Bece

    (gg, yk, il)Explora más en

    • CSS
    • javascript
    • Técnicas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript

    Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript

    Implemente rápidamente. Implementar inteligentemente Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-escriba-mejor-css-tomando-prestadas-ideas-de-funciones-de-javascript-1172-0.jpg

    2024-04-04

     

    Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript
    Escriba mejor CSS tomando prestadas ideas de funciones de JavaScript

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20