{"id":59442,"date":"2023-12-04T15:58:40","date_gmt":"2023-12-04T10:28:40","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=59442"},"modified":"2024-06-10T15:35:26","modified_gmt":"2024-06-10T10:05:26","slug":"dynamic-css-using-aem-style-system-and-custom-tool","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/dynamic-css-using-aem-style-system-and-custom-tool\/","title":{"rendered":"Dynamic CSS using AEM style system and custom tool"},"content":{"rendered":"

Summary<\/b>\u00a0<\/span><\/h2>\n

A business requirement in my project wanted specific users to reskin or restyle AEM components without needing deployment. We know that with the help of OOTB style systems, we can configure styles for the component, but it would still require code deployment. So, the solution was to build a tool allowing authorized users to upload CSS to a specific location in AEM and restyle or reskin AEM components with the help of OOTB-style systems.\u00a0<\/span><\/p>\n

Let me guide you through the steps that I undertook to develop the same.<\/span><\/p>\n

Prerequisites<\/b>\u00a0<\/span><\/h2>\n

For this, you should<\/span><\/p>\n

    \n
  1. Have basic knowledge of AEM-style systems<\/span><\/li>\n
  2. Know how to create a custom tool in AEM<\/span><\/li>\n
  3. Know how to write BEM-specific CSS<\/span><\/li>\n<\/ol>\n

    Steps taken to achieve the task<\/b><\/h2>\n
      \n
    1. Create a custom tool<\/span><\/li>\n
    2. Write CSS with BEM notations<\/span><\/li>\n
    3. Configure styles in the component<\/span><\/li>\n<\/ol>\n

      Create a custom tool<\/b><\/h2>\n
        \n
      1. First, we need to design a custom tool with the following features:<\/span><\/li>\n<\/ol>\n