{"id":115,"date":"2025-09-11T21:31:39","date_gmt":"2025-09-11T21:31:39","guid":{"rendered":"https:\/\/scootercam.net\/notes\/?p=115"},"modified":"2025-09-11T21:31:39","modified_gmt":"2025-09-11T21:31:39","slug":"optimizing-css","status":"publish","type":"post","link":"https:\/\/scootercam.net\/blog\/optimizing-css\/","title":{"rendered":"Optimizing CSS"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Option C: Smart Single File CSS Implementation Plan<\/h1>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>Create one optimized CSS file with page-specific targeting using body classes. This eliminates external dependencies while keeping deployment simple.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 1: Preparation &amp; Backup<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Document Current Setup<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Create analysis folder\nmkdir css-optimization\ncd css-optimization\n\n# Document current external CSS links\necho \"=== Current CSS Links ===\" &gt; current-setup.txt\nfor page in *.php; do\n  echo \"--- $page ---\" &gt;&gt; current-setup.txt\n  grep -n \"stylesheet\\|@import\\|fonts.googleapis\" \"$page\" &gt;&gt; current-setup.txt\n  echo \"\" &gt;&gt; current-setup.txt\ndone\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Identify Your Pages &amp; Custom Classes<\/h3>\n\n\n\n<p>Create <code>page-inventory.txt<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>index.php     - Homepage (hero section, weather widget)\nabout.php     - About page (team grid, contact info)\ngallery.php   - Photo gallery (grid layout, lightbox)\ncontact.php   - Contact form (form styling, map)\nblog.php      - Blog listing (post cards, pagination)\nnews.php      - News updates (article layout)\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Create Backup<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>cp -r your-website-folder your-website-backup-$(date +%Y%m%d)\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 2: Download &amp; Organize Assets<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Download W3.CSS<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Create CSS directory structure\nmkdir -p css\/fonts css\/build\n\n# Download W3.CSS\ncurl -o css\/build\/w3-original.css https:\/\/www.w3schools.com\/w3css\/4\/w3.css\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Download Google Fonts<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit https:\/\/gwfh.mranftl.com\/fonts<\/li>\n\n\n\n<li>Find your fonts (check your current <code>&lt;link><\/code> tags)<\/li>\n\n\n\n<li>Select weights you use (usually 400, 700)<\/li>\n\n\n\n<li>Choose &#8220;Modern Browsers&#8221;<\/li>\n\n\n\n<li>Copy CSS and download font files<\/li>\n<\/ol>\n\n\n\n<p><strong>Save as <code>css\/fonts.css<\/code>:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Example - replace with your actual fonts *\/\n@font-face {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 400;\n  src: url('fonts\/open-sans-400.woff2') format('woff2');\n  font-display: swap;\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-weight: 700;\n  src: url('fonts\/open-sans-700.woff2') format('woff2');\n  font-display: swap;\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Extract Your Custom CSS<\/h3>\n\n\n\n<p>Copy your existing custom CSS to <code>css\/build\/custom-original.css<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 3: Implement Body Classes<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add Body Classes to Each Page<\/h3>\n\n\n\n<p>Update each PHP page&#8217;s <code>&lt;body&gt;<\/code> tag:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- index.php --&gt;\n&lt;body class=\"page-index\"&gt;\n\n&lt;!-- about.php --&gt;\n&lt;body class=\"page-about\"&gt;\n\n&lt;!-- gallery.php --&gt;\n&lt;body class=\"page-gallery\"&gt;\n\n&lt;!-- contact.php --&gt;\n&lt;body class=\"page-contact\"&gt;\n\n&lt;!-- blog.php --&gt;\n&lt;body class=\"page-blog\"&gt;\n\n&lt;!-- news.php --&gt;\n&lt;body class=\"page-news\"&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Test Body Classes Work<\/h3>\n\n\n\n<p>Add temporary CSS to verify:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\nbody.page-index { background: lightblue; }\nbody.page-about { background: lightgreen; }\n\/* etc... *\/\n&lt;\/style&gt;\n<\/code><\/pre>\n\n\n\n<p>Visit each page to confirm different background colors appear.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 4: Analyze &amp; Purge CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install Analysis Tools<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Install PurgeCSS and CSS minifier\nnpm install -g purgecss csso-cli\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create PurgeCSS Configuration<\/h3>\n\n\n\n<p>Save as <code>purgecss.config.js<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>module.exports = {\n  content: &#91;\n    '*.php',\n    '**\/*.php',\n    '*.html',\n    '**\/*.html'\n  ],\n  css: &#91;'css\/build\/w3-original.css'],\n  safelist: &#91;\n    \/\/ Interactive classes (JavaScript)\n    'w3-show', 'w3-hide',\n    'w3-animate-opacity', 'w3-animate-left', 'w3-animate-right',\n    'w3-animate-top', 'w3-animate-bottom', 'w3-animate-zoom',\n    \n    \/\/ Modal and overlay classes\n    'w3-modal', 'w3-overlay',\n    \n    \/\/ State classes\n    'active', 'selected', 'current', 'open', 'closed',\n    \n    \/\/ Dynamic classes (regex patterns)\n    \/^w3-animate-\/,\n    \/^page-\/,\n    \n    \/\/ Add your custom interactive classes here\n    'mobile-menu-open',\n    'gallery-active',\n    \/\/ etc...\n  ],\n  defaultExtractor: content =&gt; content.match(\/&#91;\\w-\/:]+(?&lt;!:)\/g) || &#91;]\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Run CSS Analysis<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Purge W3.CSS\npurgecss --config purgecss.config.js --output css\/build\/\n\n# This creates css\/build\/w3-original.css (purged version)\nmv css\/build\/w3-original.css css\/build\/w3-purged.css\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 5: Create Smart Single File<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Reorganize Custom CSS with Body Class Targeting<\/h3>\n\n\n\n<p>Create <code>css\/build\/custom-targeted.css<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* ================================================\n   SHARED STYLES (Used across multiple pages)\n   ================================================ *\/\n\n\/* Custom header\/footer - used on all pages *\/\n.custom-header {\n  background: #333;\n  color: white;\n  padding: 1rem 0;\n}\n\n.custom-footer {\n  background: #f5f5f5;\n  text-align: center;\n  padding: 2rem 0;\n}\n\n\/* Custom navigation - used on all pages *\/\n.custom-nav {\n  \/* your nav styles *\/\n}\n\n\/* ================================================\n   PAGE-SPECIFIC STYLES\n   ================================================ *\/\n\n\/* ===== INDEX PAGE STYLES ===== *\/\nbody.page-index .hero-banner {\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  padding: 4rem 0;\n  text-align: center;\n}\n\nbody.page-index .weather-widget {\n  background: rgba(255,255,255,0.9);\n  border-radius: 8px;\n  padding: 1rem;\n  margin: 2rem 0;\n}\n\n\/* ===== ABOUT PAGE STYLES ===== *\/\nbody.page-about .team-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 2rem;\n  margin: 2rem 0;\n}\n\nbody.page-about .team-member {\n  text-align: center;\n  padding: 1rem;\n  border: 1px solid #ddd;\n  border-radius: 8px;\n}\n\n\/* ===== GALLERY PAGE STYLES ===== *\/\nbody.page-gallery .gallery-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 1rem;\n  padding: 2rem 0;\n}\n\nbody.page-gallery .gallery-item {\n  aspect-ratio: 1;\n  overflow: hidden;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: transform 0.3s ease;\n}\n\nbody.page-gallery .gallery-item:hover {\n  transform: scale(1.05);\n}\n\n\/* ===== CONTACT PAGE STYLES ===== *\/\nbody.page-contact .contact-form {\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 2rem;\n  background: #f9f9f9;\n  border-radius: 8px;\n}\n\nbody.page-contact .form-group {\n  margin-bottom: 1.5rem;\n}\n\n\/* ===== BLOG PAGE STYLES ===== *\/\nbody.page-blog .post-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  margin: 2rem 0;\n}\n\nbody.page-blog .post-card {\n  border: 1px solid #ddd;\n  border-radius: 8px;\n  overflow: hidden;\n  transition: box-shadow 0.3s ease;\n}\n\nbody.page-blog .post-card:hover {\n  box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n\/* ===== NEWS PAGE STYLES ===== *\/\nbody.page-news .news-article {\n  border-bottom: 1px solid #eee;\n  padding: 2rem 0;\n}\n\nbody.page-news .news-article:last-child {\n  border-bottom: none;\n}\n\n\/* ================================================\n   RESPONSIVE STYLES\n   ================================================ *\/\n\n@media (max-width: 768px) {\n  \/* Mobile adjustments for specific pages *\/\n  body.page-index .hero-banner {\n    padding: 2rem 0;\n  }\n  \n  body.page-gallery .gallery-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n  \n  body.page-contact .contact-form {\n    margin: 0 1rem;\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Combine All CSS Files<\/h3>\n\n\n\n<p>Create build script <code>build-css.sh<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#!\/bin\/bash\necho \"Building optimized CSS file...\"\n\n# Combine all CSS in the correct order\ncat &gt; css\/main.css &lt;&lt; 'EOF'\n\/*! \n * Optimized CSS for Scootercam.net\n * Generated: $(date)\n * Contains: Fonts + W3.CSS (purged) + Custom Styles\n *\/\n\nEOF\n\n# Add fonts\necho \"\/* ===== FONTS ===== *\/\" &gt;&gt; css\/main.css\ncat css\/fonts.css &gt;&gt; css\/main.css\n\necho \"\" &gt;&gt; css\/main.css\necho \"\/* ===== W3.CSS (PURGED) ===== *\/\" &gt;&gt; css\/main.css\ncat css\/build\/w3-purged.css &gt;&gt; css\/main.css\n\necho \"\" &gt;&gt; css\/main.css\necho \"\/* ===== CUSTOM STYLES ===== *\/\" &gt;&gt; css\/main.css\ncat css\/build\/custom-targeted.css &gt;&gt; css\/main.css\n\necho \"CSS combination complete!\"\necho \"Size: $(wc -c &lt; css\/main.css) bytes\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Minify the Final CSS<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Make script executable and run\nchmod +x build-css.sh\n.\/build-css.sh\n\n# Minify the combined CSS\ncsso css\/main.css --output css\/main.min.css\n\necho \"Final minified size: $(wc -c &lt; css\/main.min.css) bytes\"\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 6: Update All Pages<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Remove Old CSS Links<\/h3>\n\n\n\n<p>Remove these from all pages:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Remove these lines --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/www.w3schools.com\/w3css\/4\/w3.css\"&gt;\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=...\" rel=\"stylesheet\"&gt;\n&lt;link rel=\"stylesheet\" href=\"custom.css\"&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Add New CSS Link<\/h3>\n\n\n\n<p>Add to the <code>&lt;head&gt;<\/code> of every page:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Optimized CSS --&gt;\n&lt;link rel=\"preload\" href=\"css\/main.min.css\" as=\"style\"&gt;\n&lt;link rel=\"stylesheet\" href=\"css\/main.min.css\"&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add Performance Hints (Optional)<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Add these for better performance --&gt;\n&lt;link rel=\"preload\" href=\"css\/fonts\/your-font-400.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;\n&lt;link rel=\"dns-prefetch\" href=\"\/\/your-domain.com\"&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 7: Testing &amp; Validation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Visual Testing Checklist<\/h3>\n\n\n\n<p>Create <code>testing-checklist.md<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>## Visual Testing Checklist\n\n### All Pages:\n- &#91; ] Header displays correctly\n- &#91; ] Navigation works\n- &#91; ] Footer appears properly\n- &#91; ] Fonts load correctly\n- &#91; ] No broken styling\n\n### Page-Specific Testing:\n- &#91; ] index.php: Hero banner, weather widget\n- &#91; ] about.php: Team grid, contact info  \n- &#91; ] gallery.php: Photo grid, hover effects\n- &#91; ] contact.php: Form styling, layout\n- &#91; ] blog.php: Post cards, grid layout\n- &#91; ] news.php: Article styling\n\n### Responsive Testing:\n- &#91; ] Mobile view (320px-768px)\n- &#91; ] Tablet view (768px-1024px) \n- &#91; ] Desktop view (1024px+)\n\n### Interactive Testing:\n- &#91; ] Buttons work and style correctly\n- &#91; ] Form interactions\n- &#91; ] Any JavaScript-toggled classes\n- &#91; ] Hover effects\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Performance Testing<\/h3>\n\n\n\n<p>Create <code>test-performance.sh<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#!\/bin\/bash\necho \"=== Performance Testing ===\"\n\necho \"CSS file size:\"\nls -lh css\/main.min.css\n\necho \"\"\necho \"Testing page load times...\"\nfor page in index about gallery contact blog news; do\n  echo \"Testing ${page}.php...\"\n  curl -w \"Time: %{time_total}s, Size: %{size_download} bytes\\n\" \\\n       -o \/dev\/null -s \"http:\/\/localhost\/${page}.php\"\ndone\n\necho \"\"\necho \"Testing external requests (should be 0 for CSS\/fonts):\"\ncurl -s \"http:\/\/localhost\/index.php\" | grep -E \"(fonts\\.googleapis|w3schools)\" || echo \"\u2713 No external CSS\/font requests found\"\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Validation<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># CSS Validation\necho \"Validating CSS...\"\ncurl -s -F \"file=@css\/main.min.css\" -F \"output=text\" \\\n  \"https:\/\/jigsaw.w3.org\/css-validator\/validator\" | grep -E \"(Valid|Error|Warning)\"\n\n# HTML Validation (check that body classes don't break anything)\nfor page in *.php; do\n  echo \"Checking $page for valid HTML...\"\n  # Use local validation or online service\ndone\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Phase 8: Deployment &amp; Monitoring<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Deploy Files<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code># Upload to your server\nscp -r css\/ user@yourserver.com:\/path\/to\/website\/\nscp *.php user@yourserver.com:\/path\/to\/website\/\n\n# Or use FTP\/cPanel file manager to upload:\n# - css\/main.min.css\n# - css\/fonts\/ (entire folder)\n# - Updated *.php files\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure Server (Optional)<\/h3>\n\n\n\n<p>Add to <code>.htaccess<\/code> for better caching:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Cache CSS and fonts for 1 year\n&lt;filesMatch \"\\.(css|woff2|woff)$\"&gt;\n    ExpiresActive on\n    ExpiresDefault \"access plus 1 year\"\n&lt;\/filesMatch&gt;\n\n# Enable gzip compression\n&lt;IfModule mod_deflate.c&gt;\n    AddOutputFilterByType DEFLATE text\/css\n    AddOutputFilterByType DEFLATE font\/woff2\n&lt;\/IfModule&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Monitor Results<\/h3>\n\n\n\n<p>Create <code>monitor.sh<\/code>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#!\/bin\/bash\necho \"=== Site Monitoring ===\"\n\necho \"Checking external requests:\"\ncurl -s \"https:\/\/yoursite.com\" | grep -c \"fonts.googleapis\\|w3schools\" || echo \"\u2713 No external CSS requests\"\n\necho \"\"\necho \"CSS file size on server:\"\ncurl -s -I \"https:\/\/yoursite.com\/css\/main.min.css\" | grep -i content-length\n\necho \"\"\necho \"Page speed test:\"\ncurl -w \"Total time: %{time_total}s\\n\" -o \/dev\/null -s \"https:\/\/yoursite.com\"\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Expected Results<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">File Size Comparison<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>BEFORE:\n- W3.CSS: ~87KB\n- Google Fonts: ~15-30KB\n- Your custom CSS: ~5-15KB  \n- Total: ~110-135KB + external requests\n\nAFTER:\n- main.min.css: ~25-40KB (75% reduction)\n- All fonts local: 0 external requests\n- Total: ~25-40KB, fully cached\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Performance Improvements<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>External Requests:<\/strong> 2-3 \u2192 0<\/li>\n\n\n\n<li><strong>CSS Load Time:<\/strong> 800ms+ \u2192 200-400ms<\/li>\n\n\n\n<li><strong>First Paint:<\/strong> Faster by 300-500ms<\/li>\n\n\n\n<li><strong>Caching:<\/strong> Full control, 1-year cache possible<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Maintenance Benefits<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Single CSS file to manage<\/li>\n\n\n\n<li>Easy to add new page-specific styles<\/li>\n\n\n\n<li>Simple deployment process<\/li>\n\n\n\n<li>No external dependencies to break<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Common Issues &amp; Solutions<\/h3>\n\n\n\n<p><strong>Styles Missing After Update:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Check if class exists in original\ngrep \"your-missing-class\" css\/build\/custom-original.css\n\n# Check if it was purged\ngrep \"your-missing-class\" css\/build\/w3-purged.css\n\n# Add to safelist if needed\n<\/code><\/pre>\n\n\n\n<p><strong>Page-Specific Styles Not Working:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Verify body class exists\ncurl -s \"http:\/\/localhost\/page.php\" | grep -o 'body class=\"&#91;^\"]*\"'\n\n# Check CSS syntax\ngrep -A 5 \"body.page-name\" css\/main.css\n<\/code><\/pre>\n\n\n\n<p><strong>Fonts Not Loading:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Check font file paths\nls -la css\/fonts\/\n\n# Test font file access\ncurl -I \"http:\/\/localhost\/css\/fonts\/your-font.woff2\"\n\n# Verify CSS font-face syntax\ngrep -A 10 \"@font-face\" css\/main.css\n<\/code><\/pre>\n\n\n\n<p><strong>CSS Too Large:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># Rerun PurgeCSS with more aggressive settings\n# Check for duplicate styles\n# Remove unused responsive breakpoints\n<\/code><\/pre>\n\n\n\n<p>This plan will give you a highly optimized, self-contained CSS setup that&#8217;s simple to maintain and deploy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Option C: Smart Single File CSS Implementation Plan Overview Create one optimized CSS file with page-specific targeting using body classes. This eliminates external dependencies while keeping deployment simple. Phase 1: Preparation &amp; Backup Step 1: Document Current Setup Step 2: Identify Your Pages &amp; Custom Classes Create page-inventory.txt: Step 3: Create Backup Phase 2: Download &#8230; <a title=\"Optimizing CSS\" class=\"read-more\" href=\"https:\/\/scootercam.net\/blog\/optimizing-css\/\" aria-label=\"Read more about Optimizing CSS\">Read more<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":1,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":116,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/posts\/115\/revisions\/116"}],"wp:attachment":[{"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/scootercam.net\/blog\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}