Component Styling

There is an implicit code convention support implemented in the Pages Taglib. Each tag which is rendering a CSS class attribute is declaring and using a 'cssBase' variable. This variable an be used to build BEM like CSS class names with the 'cssBase' as the 'block identifier'.

If no explicit 'cssBase' is specified the resource type of the component to render is used to build the default 'cssBase' value. The resource type is used as is with the '/' replaced by a '-'.

The use of the component type makes is possible to declare CSS classes for component widely without side effect to other components and independently from the components content hierarchy (context free).

Yes, such CSS class names are very long but if SCSS is used the CSS rules are very clear and focussed to the component.

                        an example - a 'text' component
                        
                            jsp
                        
                        
                    
<%@taglib prefix="cpn" uri="http://sling.composum.com/cpnl/1.0" %> 
<%@taglib prefix="cpp" uri="http://sling.composum.com/cppl/1.0" %> 
<cpp:defineObjects/> 
<cpp:element var="text" type="com.composum.pages.components.model.text.Text" 
             cssAdd="@{textCSS}_align-@{text.alignment}"> 
    <cpn:text tagName="h${text.titleLevel}" class="${textCssBase}_title" value="${text.title}"/> 
    <cpn:text class="${textCSS}_text" value="${text.text}" type="rich"/> 
</cpp:element>

The name of the 'cssBase' variable is derived from the components model variable name automatically. In the example the model variable name is 'text' and the derived 'cssBase' name 'textCssBase' or alternative 'textCSS'.

This variable is used to build CSS class names for the 'title' and the 'text' content properties. The 'element' tag in the example is rendering a 'div' tag with the 'cssBase' as CSS class in this 'div' tag. This is the default behaviour - this behaviour of the 'element' tag can be modified.

In the example is an additional CSS class built using the 'cssBase' and added to the 'div's CSS classes with the tag attribute 'cssAdd'. The variables declared by the 'element' tag are used here in the 'element' tag attributes itself. In this case the JSP-EL expression must start with a '@' (@{...}) instead of the '$' (${...}).

In the following rendering result example are the rendered CSS classes derived from the components resource type are illustrated.

                        a rendered 'text' component example
                        
                            html
                        
                        
                    
<div class="composum-pages-components-element-text_align-left composum-pages-components-element-text"> 
    <div class="composum-pages-components-element-text_text"> 
        <p>...</p> 
    </div> 
</div>

The CSS rule of the 'text' component are context free and cannot produce side effects to other components.

example SCSS rules - the 'text' component scss

.composum-pages-components-element-text { 
    text-align: left; 
 
    &_title { 
        @include inline-title; 
        font-size: $text-title-font-size; 
    } 
 
    &_text { 
        p { 
            margin: $text-spacing-default 0; 
        } 
    } 
 
    &_align { 
 
        &-right { 
            text-align: right; 
        } 
 
        &-center { 
            text-align: center; 
        } 
 
        &-justify { 
 
            .composum-pages-components-element-text { 
 
                &_text { 
                    text-align: justify; 
                } 
            } 
        } 
    } 
}

composum/pages/components/element/text

The CSS rules generated from the SCSS file are very simple. No complex CSS class hierarchy is produced:

generated CSS rules css

.composum-pages-components-element-text { 
  text-align: left; 
  ... 
} 
.composum-pages-components-element-text_title { 
  margin: 15px 0; 
  ... 
} 
.composum-pages-components-element-text_text p { 
  margin: 2rem 0; 
} 
.composum-pages-components-element-text_align-right { 
  text-align: right; 
} 
.composum-pages-components-element-text_align-center { 
  text-align: center; 
} 
.composum-pages-components-element-text_align-justify .composum-pages-components-element-text_text { 
  text-align: justify; 
}