CSS Layer

Best practices for the PrimeNG cascade layer in styled mode.

CSS Specificity #

The @layer is a standard CSS feature to define cascade layers for a customizable order of precedence. If you need to become more familiar with layers, visit the documentation at MDN to begin with. PrimeNG wraps the built-in style classes under the primeng cascade layer to make the library styles easy to override. CSS in your app without a layer has the highest CSS specificity, so you'll be able to override styles regardless of the location or how strong a class is written.

For example, let's assume you need to remove the rounded borders of the InputSwitch component defined by the theme in use. In order to achieve this, .p-inputswitch .p-inputswitch-slider selector needs to be overriden. Without the layers, we'd have to write a stronger css or use !important however, with layers, this does not present an issue as your CSS can always override PrimeNG with a more straightforward class name such as my-inputswitch. Another advantage of this approach is that it does not force you to figure out the built-in class names of the components.


<p-inputSwitch [(ngModel)]="checked" styleClass="my-inputswitch" />

Reset #

Ease of customization may present an issue if you have global styles on HTML elements like inputs and buttons that are also utilized by PrimeNG because global styles with a broader scope e.g. button { } and no layer always override the PrimeNG components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice is wrapping your CSS in a layer like reset and make sure primeNG comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeNG components.


/* Order */
@layer reset, primeng;

/* Reset CSS */
@layer reset {
    button,
    input {
        /* CSS to Reset */
    }
}

Libraries #

Compatibility between PrimeNG and CSS libraries.

Tailwind CSS #

Tailwind CSS includes a reset utility in base called preflight. If you are using this feature, wrap the base and utilities in separate layers and make sure primeNG layer comes after the base.


@layer tailwind-base, primeng, tailwind-utilities;
        
@layer tailwind-base {
    @tailwind base;
}

@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

Bootstrap #

Bootstrap has a reboot utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.


@layer bootstrap-reboot, primeng

@import "bootstrap-reboot.css" layer(bootstrap-rebooot);

Normalize #

Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primeNG coming after the normalized layer.


@layer normalize, primeng;

@import "normalize.css" layer(normalize-reset);