CSS Styling Best Practices in Oorian

Oorian provides multiple ways to style your UI. This article covers best practices for keeping your styling maintainable as your application grows.

Inline Styles for Dynamic Values

Use addStyleAttribute() for values that change dynamically:

progressBar.setWidth(percentage + "%");
element.setBackgroundColor(status.getColor());

CSS Classes for Reusable Styles

Use addClass() for predefined styles:

button.addClass("btn btn-primary");
card.addClass("shadow-lg rounded");

Define Constants for Consistency

public class Styles
{
    public static final String PRIMARY_COLOR = "#2563eb";
    public static final String TEXT_COLOR = "#1f2937";
    public static final String BORDER_RADIUS = "8px";
    public static final String SHADOW = "0 2px 4px rgba(0,0,0,0.1)";
}

// Usage
card.setBackgroundColor(Styles.PRIMARY_COLOR);
card.setBorderRadius(Styles.BORDER_RADIUS);

Component-Level Styling

Encapsulate styles in custom components:

public class PrimaryButton extends Button
{
    public PrimaryButton(String text)
    {
        super(text);
        setBackgroundColor("#2563eb");
        setColor("#ffffff");
        setBorderRadius("6px");
        setPadding("10px 20px");
    }
}

External Stylesheets for Complex Styles

For complex CSS (animations, pseudo-elements), use external stylesheets:

@Override
protected void createHead(Head head)
{
    head.addCssLink("/css/custom-styles.css");
}

CSS Grid and Flexbox

// Flexbox
Div toolbar = new Div();
toolbar.setDisplay(Display.FLEX);
toolbar.setJustifyContent(JustifyContent.SPACE_BETWEEN);
toolbar.setAlignItems(AlignItems.CENTER);

// CSS Grid
Div grid = new Div();
grid.setDisplay(Display.GRID);
grid.addStyleAttribute("grid-template-columns", "repeat(3, 1fr)");
grid.addStyleAttribute("gap", "20px");

Avoid Anti-Patterns

• Don't mix inline and class styles for the same properties
• Don't hardcode colors everywhere—use constants
• Don't create overly specific selectors in CSS

Conclusion

Good styling practices keep your Oorian application maintainable. Use inline styles for dynamic values, classes for reusable patterns, and encapsulate common styles in components.