jsp - How to handle cq component with same html structure and different css? -
i have 2 jsps 2 cq components have same html structure css different.
- what best practices refactoring in case?
one scenario have single component , set css classes based on input provided author in dialog (component type 1, component type 2), gets messy cause need if checks , set different values css classes. becomes more complicated if add 3rd component same html structure , different css.
i suggest use 1 of next approaches:
create base component html structure , each design create components have
sling:resourcesupertype
of base component. , in child components can override css file specific one. base component should made of (at least) 2 jsp files:- container class (unique among different designs) contains include of actual component content. class should used in selectors in css file.
.container-design-1 .title {}
. container can overwritten in child components. - jsp content.
- container class (unique among different designs) contains include of actual component content. class should used in selectors in css file.
also can still use component dialogue, populate dropdown menu available designs dynamically. example, can have servlet+service looks repository , collects available clientlib categories component. , during rendering include selected clientlib category, set unique class container , use in css selectors (like in previous approach).
also in both cases html , id/class names of elements should same, , styles implementation different.