{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"CSS Optimization Guide","siteUrl":"https://xrpl.org/","llmstxt":{"hide":false,"title":"XRPL Developer Portal & Documentation","description":"Explore XRP Ledger documentation, blogs, and other blockchain developer resources needed to start building and integrating with the ledger.","details":{"content":"XRP Ledger concepts, use cases, tutorials, references, and other blockchain developer resources. Also, stay up to date with release announcements and more through the XRPL Blog."},"sections":[{"title":"Introduction","description":"A high-level introduction to the XRP Ledger.","includeFiles":["docs/introduction/**/*.*","about/faq.md"],"excludeFiles":["docs/introduction/index.md"]},{"title":"Use Cases","description":"Real-world applications and business scenarios for the XRP Ledger.","includeFiles":["docs/use-cases/**/*.*"],"excludeFiles":["docs/use-cases/index.md","docs/use-cases/defi/index.md"]},{"title":"Agentic Transactions","description":"XRPL AI Starter Kit to help autonomous agents discover, set up, and execute agentic transactions on the XRP Ledger.","includeFiles":["docs/agents/**/*.*"],"excludeFiles":[]},{"title":"Concepts","description":"Core concepts including accounts, tokens, transactions, consensus, and more.","includeFiles":["docs/concepts/**/*.*"],"excludeFiles":["docs/concepts/index.md","docs/concepts/decentralized-storage/index.md","docs/concepts/payment-types/index.md"]},{"title":"Tutorials","description":"Step-by-step guides for building on the XRP Ledger in JavaScript, Python, Go, and more.","includeFiles":["docs/tutorials/**/*.*"],"excludeFiles":[]},{"title":"References","description":"Protocol specification, transaction types, ledger entries, and API methods.","includeFiles":["docs/references/**/*.*"],"excludeFiles":["docs/references/xrp-api.md","docs/references/data-api.md","docs/references/protocol/index.md","docs/references/protocol/ledger-data/ledger-entry-types/index.md","docs/references/protocol/transactions/index.md","docs/references/protocol/transactions/types/index.md","docs/references/http-websocket-apis/api-conventions/index.md","docs/references/http-websocket-apis/public-api-methods/*/index.md","docs/references/http-websocket-apis/admin-api-methods/*/index.md"]},{"title":"Infrastructure","description":"Install, configure, and troubleshoot xrpld and Clio servers.","includeFiles":["docs/infrastructure/**/*.*"],"excludeFiles":["docs/infrastructure/index.md","docs/infrastructure/*/index.md","docs/infrastructure/installation/build-run-xrpld-in-reporting-mode.md","docs/infrastructure/configuration/data-retention/index.md","docs/infrastructure/configuration/server-modes/index.md"]},{"title":"Blog (2023+)","description":"Recent XRPL Blog posts (showing 2023 and newer).","includeFiles":["blog/2023/**/*.*","blog/2024/**/*.*","blog/2025/**/*.*","blog/2026/**/*.*"],"excludeFiles":[]},{"title":"Resources","description":"Developer resources and contribution guidelines.","includeFiles":["resources/**/*.*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"css-optimization-guide","__idx":0},"children":["CSS Optimization Guide"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"overview","__idx":1},"children":["Overview"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This document describes the CSS optimization implementation for the XRPL Dev Portal, including the rationale, implementation details, performance improvements, and maintenance guidelines."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"the-problem","__idx":2},"children":["The Problem"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"before-optimization","__idx":3},"children":["Before Optimization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The dev portal was serving a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["486 KB"]}," minified CSS bundle that included:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Entire Bootstrap 5.3.8 framework"]}," (~200+ KB)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Thousands of unused CSS selectors"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["No tree-shaking or dead code elimination"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All styles loaded on every page, regardless of usage"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["1-minute lag"]}," in Chrome DevTools when filtering CSS"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"impact","__idx":4},"children":["Impact"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Developer Experience:"]}," DevTools filter took 60+ seconds to respond"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Page Performance:"]}," 486 KB CSS downloaded on every page load"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Build Process:"]}," Outdated Sass 1.26.10 (from 2020)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Debugging:"]}," No source maps, even in development"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"analysis-results","__idx":5},"children":["Analysis Results"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Initial analysis showed:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"Bundle Size:      486.64 KB\nTotal Selectors:  5,423\nUnique Selectors: 4,678\n\nBootstrap Component Usage:\n  - Pagination: 998 usages\n  - Cards: 428 usages\n  - Grid System: 253 usages\n  - ...but also...\n  - Toast: 8 usages\n  - Spinner: 8 usages\n  - Accordion: 0 usages (unused!)\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"the-solution","__idx":6},"children":["The Solution"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"modern-build-pipeline","__idx":7},"children":["Modern Build Pipeline"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Implemented a three-stage optimization pipeline:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"SCSS → Sass Compiler → PostCSS → Optimized CSS\n                         │\n                         ├─ PurgeCSS (removes unused)\n                         ├─ Autoprefixer (adds vendor prefixes)\n                         └─ cssnano (minifies)\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"key-technologies","__idx":8},"children":["Key Technologies"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Sass (latest)"]}," - Modern SCSS compilation with better performance"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PostCSS"]}," - Industry-standard CSS processing"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PurgeCSS"]}," - Intelligent unused CSS removal"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Autoprefixer"]}," - Browser compatibility"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["cssnano"]}," - Advanced minification"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"implementation","__idx":9},"children":["Implementation"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-dependency-upgrades","__idx":10},"children":["1. Dependency Upgrades"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"devDependencies\": {\n    \"sass\": \"^1.93.2\",  // was 1.26.10\n    \"postcss\": \"^8.5.6\",\n    \"postcss-cli\": \"^11.0.1\",\n    \"@fullhuman/postcss-purgecss\": \"^7.0.2\",\n    \"autoprefixer\": \"^10.4.21\",\n    \"cssnano\": \"^7.1.1\"\n  }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-build-scripts","__idx":11},"children":["2. Build Scripts"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Created separate development and production builds:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n  \"scripts\": {\n    \"build-css\": \"Production build with full optimization\",\n    \"build-css:dev\": \"Development build with source maps\",\n    \"build-css:watch\": \"Watch mode for continuous compilation\",\n    \"analyze-css\": \"node scripts/analyze-css.js\"\n  }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Production Build:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Full PurgeCSS optimization"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Minified and compressed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Autoprefixed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["❌ No source maps"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Development Build:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Source maps for debugging"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Autoprefixed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["❌ No PurgeCSS (faster builds)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["❌ Not minified (readable)"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-purgecss-configuration","__idx":12},"children":["3. PurgeCSS Configuration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Created ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postcss.config.cjs"]}," with intelligent safelist:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Content paths - scan these for class names\ncontent: [\n  './**/*.tsx',\n  './**/*.md',\n  './**/*.yaml',\n  './**/*.html',\n  './static/js/**/*.js',\n]\n\n// Safelist - preserve these classes\nsafelist: {\n  standard: [\n    'html', 'body', 'light', 'dark',\n    /^show$/, /^active$/, /^disabled$/,\n  ],\n  deep: [\n    /dropdown-menu/, /modal-backdrop/,\n    /cm-/, /CodeMirror/, // Third-party\n    /rpc-tool/, /websocket/, // Custom components\n  ],\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Safelist Strategy:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Standard:"]}," State classes added by JavaScript"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Deep:"]}," Component patterns (keeps parent and children)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Greedy:"]}," Attribute-based matching"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"4-analysis-tool","__idx":13},"children":["4. Analysis Tool"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Created ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["scripts/analyze-css.js"]}," to track optimization:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Bundle size metrics"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Selector counts"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Bootstrap component usage"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom pattern detection"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optimization recommendations"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"results","__idx":14},"children":["Results"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"performance-improvements","__idx":15},"children":["Performance Improvements"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Metric"},"children":["Metric"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Before"},"children":["Before"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"After"},"children":["After"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Improvement"},"children":["Improvement"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Bundle Size (Uncompressed)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["486.64 KB"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["280.92 KB"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["42% smaller"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Bundle Size (Gzipped)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["71.14 KB"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["43.32 KB"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["39% smaller"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Total Selectors"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["5,423"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2,681"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["51% fewer"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Unique Selectors"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["4,678"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["2,167"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["54% fewer"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["DevTools Filter"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["~60 seconds"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["<1 second"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["98% faster"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Download Time (3G)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["~2.0s"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["~1.2s"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["40% faster"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Gzipped size is what actually gets transmitted over the network, representing the real-world bandwidth savings."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bootstrap-component-optimization","__idx":16},"children":["Bootstrap Component Optimization"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Component"},"children":["Component"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Before"},"children":["Before"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"After"},"children":["After"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Reduction"},"children":["Reduction"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pagination"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["998"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["831"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["17%"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cards"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["428"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["306"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["29%"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Grid System"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["253"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["94"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["63%"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Badge"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["253"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["0"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["100% (unused)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Navbar"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["171"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["78"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["54%"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Buttons"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["145"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["77"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["47%"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Forms"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["179"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["70"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["61%"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"developer-experience","__idx":17},"children":["Developer Experience"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Before:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"Build time: 5-10 seconds\nDevTools CSS filter: 60 seconds\nDebugging: No source maps\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["After:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"Production build: 8-12 seconds\nDevelopment build: 3-5 seconds (no PurgeCSS)\nDevTools CSS filter: <1 second\nDebugging: Source maps in dev mode\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"maintenance","__idx":18},"children":["Maintenance"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"adding-new-styles","__idx":19},"children":["Adding New Styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When adding new component styles:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Create the SCSS file:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":"// styles/_my-component.scss\n.my-component {\n  // styles here\n}\n","lang":"scss"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Import in xrpl.scss:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"scss","header":{"controls":{"copy":{}}},"source":"@import \"_my-component.scss\";\n","lang":"scss"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["If using dynamic classes, update safelist:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// postcss.config.cjs\ndeep: [\n  /my-component/, // Keeps all .my-component-* classes\n]\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Test both builds:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm run build-css:dev    # Test development build\nnpm run build-css        # Test production build\nnpm run analyze-css      # Check bundle size impact\n","lang":"bash"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"troubleshooting-missing-styles","__idx":20},"children":["Troubleshooting Missing Styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If styles are missing after a production build:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Identify the missing class:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# Search for class usage in codebase\ngrep -r \"missing-class\" .\n","lang":"bash"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Check if it's dynamically added:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Bootstrap JavaScript components"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["React state-based classes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Third-party library classes"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add to PurgeCSS safelist:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// postcss.config.cjs\nsafelist: {\n  deep: [\n    /missing-class/, // Preserve this pattern\n  ],\n}\n","lang":"javascript"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rebuild and verify:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm run build-css\nnpm run analyze-css\n","lang":"bash"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"monitoring-bundle-size","__idx":21},"children":["Monitoring Bundle Size"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Run the analysis tool regularly:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm run analyze-css\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Watch for:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Bundle size > 350 KB (indicates regression)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Components with 0 usages (can be removed from Bootstrap import)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Significant selector count increases"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"future-optimizations","__idx":22},"children":["Future Optimizations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Potential next steps for further optimization:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Code Splitting"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Split vendor CSS (Bootstrap) from custom styles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Lazy-load page-specific styles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Critical CSS extraction"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Bootstrap Customization"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Import only needed Bootstrap components"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Remove unused variables and mixins"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Custom Bootstrap build"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component-Level CSS"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CSS Modules for page components"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CSS-in-JS for dynamic styles"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Scoped styles per route"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Advanced Compression"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Brotli compression (88% ratio vs 76% gzip)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["CSS splitting by media queries"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["HTTP/2 server push for critical CSS"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"migration-notes","__idx":23},"children":["Migration Notes"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"breaking-changes","__idx":24},"children":["Breaking Changes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["None"]}," - This optimization is backward-compatible. All existing classes and styles are preserved."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"testing-checklist","__idx":25},"children":["Testing Checklist"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When testing the optimization:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Homepage loads correctly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Documentation pages display properly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Blog posts render correctly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Dev tools (RPC tool, WebSocket tool) function"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Navigation menus work"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Dropdowns and modals open correctly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Forms are styled properly"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Code syntax highlighting works"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Print styles work"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"input","attributes":{"checked":false,"type":"checkbox","readOnly":true},"children":[]}," Light/dark theme switching works"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"rollback-procedure","__idx":26},"children":["Rollback Procedure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If issues are found:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Temporarily revert to old build:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"# In package.json, change build-css to:\n\"build-css\": \"sass --load-path styles/scss styles/xrpl.scss ./static/css/devportal2024-v1.css --style compressed --no-source-map\"\n","lang":"bash"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Rebuild:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm run build-css\n","lang":"bash"},"children":[]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Report the issue"]}," with:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Missing class names"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Page where issue appears"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Expected vs actual behavior"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":27},"children":["Resources"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"documentation","__idx":28},"children":["Documentation"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://purgecss.com/"},"children":["PurgeCSS Documentation"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://postcss.org/"},"children":["PostCSS Documentation"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://sass-lang.com/"},"children":["Sass Documentation"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://getbootstrap.com/docs/5.3/customize/sass/"},"children":["Bootstrap Customization"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"tools","__idx":29},"children":["Tools"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["npm run build-css"]}," - Production build"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["npm run build-css:dev"]}," - Development build"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["npm run build-css:watch"]}," - Watch mode"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["npm run analyze-css"]}," - Bundle analysis"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"files","__idx":30},"children":["Files"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["styles/README.md"]}," - Build process documentation"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postcss.config.cjs"]}," - PostCSS and PurgeCSS configuration"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["scripts/analyze-css.js"]}," - Bundle analysis tool"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["package.json"]}," - Build scripts"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"conclusion","__idx":31},"children":["Conclusion"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This optimization reduces the CSS bundle by 42% (486 KB → 281 KB), dramatically improving both developer experience and end-user performance. The implementation uses industry-standard tools and maintains full backward compatibility while providing a foundation for future optimizations."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Key Takeaways:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ 42% smaller uncompressed CSS bundle (486 KB → 281 KB)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ 39% smaller gzipped bundle (71 KB → 43 KB network transfer)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ 98% faster DevTools filtering (60s → <1s)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Modern build tooling (Sass + PostCSS + PurgeCSS)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Source maps in development mode"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Backward compatible - no breaking changes"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["✅ Well documented and maintainable"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Last updated: October 2025"]}," ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["Contributors: CSS Optimization Initiative"]}]}]},"headings":[{"value":"CSS Optimization Guide","id":"css-optimization-guide","depth":1},{"value":"Overview","id":"overview","depth":2},{"value":"The Problem","id":"the-problem","depth":2},{"value":"Before Optimization","id":"before-optimization","depth":3},{"value":"Impact","id":"impact","depth":4},{"value":"Analysis Results","id":"analysis-results","depth":3},{"value":"The Solution","id":"the-solution","depth":2},{"value":"Modern Build Pipeline","id":"modern-build-pipeline","depth":3},{"value":"Key Technologies","id":"key-technologies","depth":3},{"value":"Implementation","id":"implementation","depth":2},{"value":"1. Dependency Upgrades","id":"1-dependency-upgrades","depth":3},{"value":"2. Build Scripts","id":"2-build-scripts","depth":3},{"value":"3. PurgeCSS Configuration","id":"3-purgecss-configuration","depth":3},{"value":"4. Analysis Tool","id":"4-analysis-tool","depth":3},{"value":"Results","id":"results","depth":2},{"value":"Performance Improvements","id":"performance-improvements","depth":3},{"value":"Bootstrap Component Optimization","id":"bootstrap-component-optimization","depth":3},{"value":"Developer Experience","id":"developer-experience","depth":3},{"value":"Maintenance","id":"maintenance","depth":2},{"value":"Adding New Styles","id":"adding-new-styles","depth":3},{"value":"Troubleshooting Missing Styles","id":"troubleshooting-missing-styles","depth":3},{"value":"Monitoring Bundle Size","id":"monitoring-bundle-size","depth":3},{"value":"Future Optimizations","id":"future-optimizations","depth":3},{"value":"Migration Notes","id":"migration-notes","depth":2},{"value":"Breaking Changes","id":"breaking-changes","depth":3},{"value":"Testing Checklist","id":"testing-checklist","depth":3},{"value":"Rollback Procedure","id":"rollback-procedure","depth":3},{"value":"Resources","id":"resources","depth":2},{"value":"Documentation","id":"documentation","depth":3},{"value":"Tools","id":"tools","depth":3},{"value":"Files","id":"files","depth":3},{"value":"Conclusion","id":"conclusion","depth":2}],"frontmatter":{"seo":{"title":"CSS Optimization Guide"}},"editPage":{"to":"https://github.com/XRPLF/xrpl-dev-portal/tree/master/CSS-OPTIMIZATION.md"},"lastModified":"2025-10-21T17:06:53.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/css-optimization","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}