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="" %> <%@taglib prefix="cpp" uri="" %> <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.

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