Style Application Hierarchy in Bullet.so

Bullet.so applies styles in a structured hierarchy, allowing flexibility while maintaining consistency.

Hierarchy of Style Application

1. Default Notion Styles (Base Styles)

Bullet.so comes with default Notion-inspired styles that define the foundational appearance of elements, including typography, spacing, and color schemes.

  • Applies to: All pages and blocks by default.
  • Can be overridden by: Theme styles, global code, page-level styles, and block editor styles.

2. Theme Styles (Predefined Design System)

Themes provide a structured way to customize global styles, primarily affecting colors, fonts, and layout settings.

  • Applies to: All pages and elements.
  • Can override: Default styles.

3. Global Code (Site-Wide Custom Styles)

Global styles are applied across the entire workspace, allowing you to define a custom look beyond what themes provide.

  • Applies to: All pages and elements.
  • Can override: Default styles and theme styles.

4. Page-Level Code (Page-Specific Styles)

Page-level styles allow you to customize the appearance of a specific page without affecting others.

  • Applies to: Only the specific page where the code is added.
  • Can override: Default, theme, and global styles.

5. Block Editor Styles (Element-Level Styling) – Highest Priority

The block editor allows users to apply styles to individual elements by selecting and customizing them directly. This has the highest priority and will override all other styles.

  • Applies to: Specific blocks or elements within a page.
  • Can override: Default styles, theme styles, global styles, and page-level styles.
  • Cannot be overridden by any other style.

Style Priority (Highest to Lowest)

  1. Block Editor Styles (Element-Level Overrides – Highest Priority)
  2. Page-Level Styles (Overrides Theme & Global Styles)
  3. Global Styles (Overrides Theme Styles, Can Be Overridden by Page-Level Code)
  4. Theme Styles (Overrides Default Styles, Can Be Overridden by Page-Level & Global Styles)
  5. Default Notion Styles (Base Styling Applied Initially)

By following this hierarchy, you can manage styles efficiently while ensuring customizations behave as expected. 🚀