Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Media Queries Management with ClientLibs in /apps folder

Avatar

Avatar
Validate 1
Level 2
gauravs23
Level 2

Likes

7 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 1
View profile

Avatar
Validate 1
Level 2
gauravs23
Level 2

Likes

7 likes

Total Posts

11 posts

Correct Reply

1 solution
Top badges earned
Validate 1
Boost 5
Boost 3
Boost 1
Affirm 1
View profile
gauravs23
Level 2

07-02-2018

Usually, the client libs(CSS) have been managed by creating Client libraries under /etc/designs and adding the CSS code using one or more CSS files in that client lib. However, we can also keep component specific client libraries, having CSS only for that component, which will make sure that not every page on the website will have to load the whole CSS. In AEM 6.3 as well, sample 'we-retail website' and 'we-unlimited-app', the Client Libs have been kept at component level under /apps/we-retail/..../components/.. folders. This seems to be a good structure, but I wanted to discuss with the community about the media-queries management for such structure.

When the client libs are under /etc/designs, the responsive styles are kept in a single file where the media-queries appear only once -

@media only screen and (max-width: 991px) {

     /* css code here */

}

@media only screen and (min-width: 0) and (max-width: 767px)  {

     /* css code here */   

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

     /* css code here */   

}

@media only screen and (min-width: 992px) and (max-width: 1024px)  {

     /* css code here */ 

}

Now, with every component CSS being placed at the component level, each component CSS file will need to have four media queries and eventually on the page, if there are 10 components, these four media queries will have to be computed for all 10 components as opposed to a single time, in case of a single file. I am not fully sure that this will create a performance issue or not. The following link - https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/, discusses having a large number of media queries on a page and concludes that it might not create any performance issues, except when the end user tries to resize a browser window.

Has anyone in their project followed this structure, keeping component specific CSS in /apps? How did you handle the media queries? Did you have any performance impact or any issues due to having repeated media-queries listed in components specific CSS?

Replies

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,408 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

07-02-2018

There is a lot of dicussion in this community about Clientlibs. Here is a good thread to review -- Best practices to manage clientlibs in AEM(Adobe CQ)