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.

• 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.