How to handle cq component with same html structure and different css?

Tags: css,jsp,adobe,cq5

Problem :

I have 2 jsps for 2 cq components that have the same html structure but the css is different.

  • What are the best practices for refactoring in this case?

One scenario would be to have a single component and set the css classes based on some input provided by the author in the dialog (component type 1, component type 2), but this gets messy cause I need to do the if checks and set different values for the css classes. It becomes even more complicated if I add a 3rd component with the same html structure and different css.

Solution :

I would suggest to use one of next approaches:

  • Create base component with html structure and for each design create components which have sling:resourceSuperType of base component. And in child components you can override css file with specific one. Base component should be made of (at least) 2 jsp files:

    • container with some class (unique among different designs) which contains include of actual component content. This class then should be used in you selectors in css file. Like .container-design-1 .title {}. This container also can be overwritten in child components.
    • jsp with content.
  • Also you can still use component dialogue, but populate dropdown menu with available designs dynamically. For example, you can have some servlet+service which looks into repository and collects available clientlib categories for this component. And during rendering you will include selected clientlib category, set unique class for your container and use it in css selectors (like in previous approach).

Also in both cases html and id/class names of elements should be the same, and only styles implementation is different.

    CSS Howto..

    Slideshow using background images with navigation and captions

    How to unhecked parent checkbox

    How to make an element with opacity 0 unclickable

    Rollover table shows hidden span class text with css

    How do you disable the set width of parent element for child element?

    How to change css content hover effect background color css php in this situation?

    How to provide CSS properties for Different browsers like Mozilla and Chrome

    How to call CSS from JavaScript

    How to reduce css http requests?

    How do I get this text using Jsoup?

    How to make a hidden (ng-cloaked) item preserve the space it takes up when its visible

    How do I make custom scrollbars with jScrollPane to be always visible?

    How to start an css effect when website open

    how to make animate.css(plugin) work instantly on live site load?

    WordPress - How to Disable a filter used by media.php from function.php? [closed]

    How can I prevent the seconds portion from displaying on the HTML5 time input element?

    How to apply styles for a Datetime Picker Text Box

    How to adjust nav menu based nav item name character length?

    How do you skew a div and keep the background image unskewed

    How to style parent li elements of headers using CSS?

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to disable custom animations from click, angular?

    How to add padding to a ul/li menu with a background image?

    Extend page content in height or show white background under content

    How to keep a sticky menu contained inside a floating sidebar?

    How to keep div visible when hovering another div

    How to re-size and crop an image client side while maintaining the aspect ratio

    Customizing ebay store HTML and CSS code (How to?)

    Truncate text in floated box and show it entirely when hovering

    How to access CSS children properly?