{"id":25959,"date":"2024-02-21T09:44:35","date_gmt":"2024-02-21T08:44:35","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=25959"},"modified":"2024-02-21T09:44:37","modified_gmt":"2024-02-21T08:44:37","slug":"frontend-trends-for-2024-css-revival-bff-ruling-languages-and-more","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/frontend-trends-for-2024-css-revival-bff-ruling-languages-and-more\/","title":{"rendered":"Frontend Trends for 2024: CSS Revival, BFF, Ruling Languages and More"},"content":{"rendered":"\n

A frontend dev never sleeps! Here are some noteworthy trends, approaches and resources that will undoubtedly pique your interest and elevate your development endeavors.<\/p>\n\n\n\n

We attended the amazing talk by Tejas Kumar during the Codemotion Conference 2023<\/a> in Milan, where he shared some amazing trends that will mark the 2024 frontend dev calendar.
This article is partly based on his talk and some other insights shared by the Codemotion community.<\/p>\n\n\n\n

CSS Not Dead<\/h2>\n\n\n\n

CSS is defying naysayers and emerging as an increasingly robust tool. Despite its inherent limitations, CSS is stepping into a new era<\/a> with the infusion of cutting-edge features and frameworks, most notably Tailwind CSS.<\/p>\n\n\n\n

New CSS Features and Resources<\/h3>\n\n\n\n
    \n
  1. Container Queries<\/strong><\/li>\n<\/ol>\n\n\n\n

    Tailoring styles based on the dimensions of the container opens up dynamic possibilities for responsive designs. Container queries provide more granular control, allowing developers to finely tune the appearance of elements within specific containers.<\/p>\n\n\n\n

      \n
    1. Nesting<\/strong><\/li>\n<\/ol>\n\n\n\n

      The introduction of nesting in CSS simplifies the structure of stylesheets, enhancing readability and organization. Nesting enables developers to encapsulate styles within specific contexts, streamlining the codebase.<\/p>\n\n\n\n

        \n
      1. Viewport Units<\/strong><\/li>\n<\/ol>\n\n\n\n

        With viewport units, CSS gains a powerful tool for responsive design. Developers can now specify lengths and sizes relative to the viewport dimensions, ensuring a seamless and adaptable user experience across various devices.<\/p>\n\n\n\n

          \n
        1. Tailwind CSS Toolkit<\/strong><\/li>\n<\/ol>\n\n\n\n

          Born in 2017 but growing rapidly in popularity today, Tailwind CSS takes center stage with promises of improved performance, enhanced developer experience (DevX), and minimized bundle sizes. Tailwind is open-source and enables devs to use pre-existant utility classes right into HTML code.<\/p>\n\n\n\n

          Backend for the Frontend (BFF): A New Dimension in Frontend Development<\/strong><\/h2>\n\n\n\n

          The delineation between frontend and backend has become more nuanced with the introduction of Backend for the Frontend (BFF) patterns. This innovative approach adds a new layer of control for frontend developers, bridging the gap between the two worlds. Let\u2019s take a closer look at it.<\/p>\n\n\n\n

          What\u2019s a BFF pattern?<\/strong><\/h3>\n\n\n\n

          The BFF (Backend for the Frontend) pattern is a design approach in software development where a dedicated backend service is created specifically to meet the needs of a frontend application. Instead of having a one-size-fits-all backend that serves multiple frontend applications, each frontend gets its own tailored backend.<\/p>\n\n\n\n

          These are some of the characteristics that BFF patterns:
          <\/p>\n\n\n\n