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?
