Clientlibs and Style System

[TomCranstoun]

The Documentation here: Style System  States

Caution:

The CSS classes (as well as any necessary Javascript) configured as style properties of a component's policy must be deployed as Client Libraries in order to work

I cannot understand the link between Clientlibs and the style system.  If I create a CSS file on an external system it will still work with the design principles of the Style System.  I am obviously missing something important, or the documentation is incorrect.

I believed that If I added a new item to the Style System I would have to support this with a new clientlib, this is not so.

My Use Case: I wish to have a generic RTE component, with many styles attached, say Quotation, Annotation, Code, Raw etc; I would like the subsequent css/js generation to contain only the styles I have used on the page; not the complete set of styles for all possible combinations of the component.  How can I do this optimisation?

[kautuk_sahni · Accepted solution]

The Style System allows developers and template editors to create multiple visual variations of a component. Authors can then in turn decide which style to use (UI level) when composing a page. The general idea with the Style System is that authors can choose various styles of how a component should look. The "styles" are backed by additional CSS classes that are injected into the outer div of a component. In the client libraries CSS rules are added based on these style classes so that the component changes appearance.

So this is just injecting the CSS Classes into the Divs. This eliminates the need to develop a custom component for each style or to customize the component dialog to enable such style functionality.

See this video:- Adobe Experience Manager Help | Using the Style System with AEM Sites

I cannot understand the link between Clientlibs and the style system.

Style system inserts the CSS Classes that are defined by CSS under client libs.

I believed that If I added a new item to the Style System I would have to support this with a new clientlib, this is not so.

Not necessarily. You can use those CSS Classes defiled in the existing CSS files in clientlibs

-Kautuk

[smacdonald2008]

Nice response Kautuk!

[TomCranstoun]

Ok I understand that part. but why

Caution:

The CSS classes (as well as any necessary Javascript) configured as style properties of a component's policy must be deployed as Client Libraries in order to work

The supporting classes can be anywhere, in-line, in an external css etc; there is no requirement for css deployed as clientlibs -- this is the part I struggle to understand.

"

[kautuk_sahni]

Having CSS under the Client Libraries is how AEM is designed. Even if we uses Style System or not CSS to be consumed by the AEM page has to reside under Client Libraries.

See this:- Using Client-Side Libraries it would tell you about How Client-Side Libraries Work in AEM.

Also read:- AEM Client Libraries explained by example

You can also include CSS hosted on CDNs via JS or other means and yes, that would also work in this case for Style System.