Skip to main content
Mantra Theme

User account menu

  • Log in

Main navigation

  • Issues
  • Questions
  • Code Samples
  • Docs
  • Search
Open

Docs

  • Admin Pages
  • Ajax loader
  • asdf
  • Blocks
  • Buttons
  • CKEditor
  • Comments
  • Components
  • Content grid
  • CSS Aggregation
  • Details
  • Dialog
  • Dropbutton
  • Edit form
  • Fences
  • Fields
  • Form API classes
  • Formatted text
  • Forms
  • Header
  • Home
  • Icons
  • iFrame Embed
  • Image alignment
  • Layout
  • Layout Builder
  • Links
  • Media
  • Media Library Widget
  • Messages
  • Modals
  • Multiple Value Form
  • Navigation
  • Node
  • Node layout
  • Page layout
  • Page Title
  • Pager
  • Questions
  • Responsive Menu
  • Search
  • Sidebars
  • Site Header
  • Spacing
  • Starterkit Theme
  • Sticky Section Headers
  • System Libraries
  • Table Example
  • Tables
  • Tabs
  • Teaser
  • Theme
  • Toolbar
  • Typography
  • UnoCSS
  • Utilities
  • Views
  • Views Admin

CSS Aggregation

Drupal has these CSS layers:

  1. Base
  2. Layout
  3. Component
  4. State
  5. Theme

Drupal libraries that load CSS define which layer each file is in. This sets the order they are loaded so cascading styles work correctly.

When a page is loaded, Drupal determines the required libraries and creates compressed bundles

https://drupal.stackexchange.com/questions/134621/how-does-css-and-js-aggregration-work-in-drupal

Advanced Aggregation module

Footer

  • Andrew's Classes
  • Drupal Architect
  • Inspiration