# Blog CSS Complexity Report

**Generated:** 1771926163.7787986

## Summary

- **Total selectors:** 841
- **Selectors with depth > 3:** 16
- **Selectors with high specificity (>100):** 39
- **Selectors with !important:** 84
- **Average depth:** 0.87
- **Average specificity score:** 6.86

## High Depth Selectors (Depth > 3)

Deeply nested selectors that could be simplified:

### `.blog-post-content-wrapper .post-content .post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`

- **Depth:** 7
- **Specificity:** (0, 0, 11)
- **Complexity Score:** 28.0

### `.blog-post-content-wrapper .post-content .post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 6
- **Specificity:** (0, 0, 10)
- **Complexity Score:** 25.0

### `.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`

- **Depth:** 6
- **Specificity:** (0, 1, 9)
- **Complexity Score:** 27.0

### `.post-content-inner [id*="ordioTextContent"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`

- **Depth:** 6
- **Specificity:** (0, 0, 10)
- **Complexity Score:** 25.0

### `.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`

- **Depth:** 5
- **Specificity:** (0, 0, 9)
- **Complexity Score:** 22.0

### `.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 5
- **Specificity:** (0, 1, 8)
- **Complexity Score:** 24.0

### `.post-content-inner [id*="ordioTextContent"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 5
- **Specificity:** (0, 0, 9)
- **Complexity Score:** 22.0

### `.post-content-inner [class*="px-6"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 5
- **Specificity:** (0, 0, 9)
- **Complexity Score:** 22.0

### `.post-content-inner [class*="px-10"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 5
- **Specificity:** (0, 0, 9)
- **Complexity Score:** 22.0

### `.post-content-inner [class*="xl:p-12"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 5
- **Specificity:** (0, 0, 10)
- **Complexity Score:** 24.5

### `.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`

- **Depth:** 5
- **Specificity:** (0, 0, 9)
- **Complexity Score:** 22.0

### `}


@media (min-width: 640px) and (max-width: 1023px)`

- **Depth:** 5
- **Specificity:** (0, 0, 1)
- **Complexity Score:** 11.0

### `.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 4
- **Specificity:** (0, 0, 8)
- **Complexity Score:** 19.0

### `.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Depth:** 4
- **Specificity:** (0, 0, 8)
- **Complexity Score:** 19.0

### `.post-content-inner ul ul ul li::marker`

- **Depth:** 4
- **Specificity:** (0, 0, 7)
- **Complexity Score:** 16.5


... and 1 more

## High Specificity Selectors (Score > 100)

Overly specific selectors that could be simplified:

### `.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`

- **Specificity:** (0, 1, 9) (score: 109)
- **IDs:** 1, **Classes:** 3, **Pseudo:** 2
- **Depth:** 6

### `.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

- **Specificity:** (0, 1, 8) (score: 108)
- **IDs:** 1, **Classes:** 3, **Pseudo:** 2
- **Depth:** 5

### `#blog-related-carousel-section .excel-visual-mini-container .flex.items-center`

- **Specificity:** (0, 1, 3) (score: 103)
- **IDs:** 1, **Classes:** 3, **Pseudo:** 0
- **Depth:** 2

### `#blog-related-carousel-section .post-card-content>.post-card-category:first-child`

- **Specificity:** (0, 1, 3) (score: 103)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 1
- **Depth:** 2

### `#blog-related-carousel-section .post-card-content>.post-card-title:first-of-type`

- **Specificity:** (0, 1, 3) (score: 103)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 1
- **Depth:** 2

### `#blog-related-carousel-section .post-card-image-wrapper.bg-ordio-blue`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 1

### `#blog-related-carousel-section .post-card-image-wrapper .excel-visual-mini-container`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 2

### `#blog-related-carousel-section .excel-visual-mini-container>div:first-child`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 1, **Pseudo:** 1
- **Depth:** 2

### `#blog-related-carousel-section .post-card-image-wrapper.bg-ordio-blue`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 1

### `#blog-related-carousel-section .post-card-image-wrapper.bg-green-100`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 1

### `#blog-related-carousel-section .post-card-image-wrapper.bg-ordio-blue>svg`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 2

### `#blog-related-carousel-section .post-card-image-wrapper.bg-green-100>svg`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 2

### `#blog-related-carousel-section .post-card--compact .post-card-content`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 2

### `#faq h2 .text-ordio-blue`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 1, **Pseudo:** 0
- **Depth:** 2

### `#blog-related-carousel-section .post-card-content>.post-card-title`

- **Specificity:** (0, 1, 2) (score: 102)
- **IDs:** 1, **Classes:** 2, **Pseudo:** 0
- **Depth:** 2


... and 24 more

## Most Complex Selectors (Top 20)

Selectors ranked by complexity score:

1. **`.blog-post-content-wrapper .post-content .post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`**
   - Complexity Score: 28.0
   - Depth: 7, Specificity: (0, 0, 11)
   - IDs: 0, Classes: 5, Pseudo: 2

2. **`.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`**
   - Complexity Score: 27.0
   - Depth: 6, Specificity: (0, 1, 9)
   - IDs: 1, Classes: 3, Pseudo: 2

3. **`.blog-post-content-wrapper .post-content .post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 25.0
   - Depth: 6, Specificity: (0, 0, 10)
   - IDs: 0, Classes: 5, Pseudo: 2

4. **`.post-content-inner [id*="ordioTextContent"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`**
   - Complexity Score: 25.0
   - Depth: 6, Specificity: (0, 0, 10)
   - IDs: 0, Classes: 3, Pseudo: 2

5. **`.post-content-inner [class*="xl:p-12"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 24.5
   - Depth: 5, Specificity: (0, 0, 10)
   - IDs: 0, Classes: 3, Pseudo: 3

6. **`.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 24.0
   - Depth: 5, Specificity: (0, 1, 8)
   - IDs: 1, Classes: 3, Pseudo: 2

7. **`.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`**
   - Complexity Score: 22.0
   - Depth: 5, Specificity: (0, 0, 9)
   - IDs: 0, Classes: 3, Pseudo: 2

8. **`.post-content-inner [id*="ordioTextContent"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 22.0
   - Depth: 5, Specificity: (0, 0, 9)
   - IDs: 0, Classes: 3, Pseudo: 2

9. **`.post-content-inner [class*="px-6"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 22.0
   - Depth: 5, Specificity: (0, 0, 9)
   - IDs: 0, Classes: 3, Pseudo: 2

10. **`.post-content-inner [class*="px-10"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 22.0
   - Depth: 5, Specificity: (0, 0, 9)
   - IDs: 0, Classes: 3, Pseudo: 2

11. **`.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`**
   - Complexity Score: 22.0
   - Depth: 5, Specificity: (0, 0, 9)
   - IDs: 0, Classes: 3, Pseudo: 2

12. **`.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 19.0
   - Depth: 4, Specificity: (0, 0, 8)
   - IDs: 0, Classes: 3, Pseudo: 2

13. **`.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`**
   - Complexity Score: 19.0
   - Depth: 4, Specificity: (0, 0, 8)
   - IDs: 0, Classes: 3, Pseudo: 2

14. **`.post-content-inner ul ul ul li::marker`**
   - Complexity Score: 16.5
   - Depth: 4, Specificity: (0, 0, 7)
   - IDs: 0, Classes: 1, Pseudo: 1

15. **`.post-content-inner ol ol ol li::marker`**
   - Complexity Score: 16.5
   - Depth: 4, Specificity: (0, 0, 7)
   - IDs: 0, Classes: 1, Pseudo: 1

16. **`.post-content-inner thead tr:first-child th:first-child`**
   - Complexity Score: 15.0
   - Depth: 3, Specificity: (0, 0, 6)
   - IDs: 0, Classes: 1, Pseudo: 2

17. **`.table-breakout-wrapper thead tr:first-child th:first-child`**
   - Complexity Score: 15.0
   - Depth: 3, Specificity: (0, 0, 6)
   - IDs: 0, Classes: 1, Pseudo: 2

18. **`.post-content-inner thead tr:first-child th:last-child`**
   - Complexity Score: 15.0
   - Depth: 3, Specificity: (0, 0, 6)
   - IDs: 0, Classes: 1, Pseudo: 2

19. **`.table-breakout-wrapper thead tr:first-child th:last-child`**
   - Complexity Score: 15.0
   - Depth: 3, Specificity: (0, 0, 6)
   - IDs: 0, Classes: 1, Pseudo: 2

20. **`.post-content-inner tbody tr:last-child td:first-child`**
   - Complexity Score: 15.0
   - Depth: 3, Specificity: (0, 0, 6)
   - IDs: 0, Classes: 1, Pseudo: 2

## !important Usage

**84 selectors use !important:**

### 8 !important declaration(s)

- `.embed-breakout-wrapper`

### 7 !important declaration(s)

- `.blog-post-content-wrapper .post-content .post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`
- `.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`
- `.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`
- `.post-content-inner [id*="ordioTextContent"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`
- `.post-content-inner [class*="px-6"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`
- `.post-content-inner [class*="px-10"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`
- `.post-content-inner [class*="xl:p-12"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div)`

### 6 !important declaration(s)

- `#blog-related-carousel-section .post-card-title`
- `#faq h2`
- `#blog-related-carousel-section .pillar-card-carousel-text .post-card-title`
- `.embed-breakout-wrapper>div`
- `.embed-breakout-wrapper iframe`

### 5 !important declaration(s)

- `.post-content-inner a.bg-ordio-blue`
- `#blog-related-carousel-section .post-card-image-wrapper.bg-ordio-blue`
- `#blog-related-carousel-section .post-card-image-wrapper.bg-green-100`
- `#faq h2 .text-ordio-blue`
- `.blog-post-content-wrapper .post-content .post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`
- `.post-content-inner div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`
- `.post-content-inner #ordioTextContent div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`
- `.post-content-inner [id*="ordioTextContent"] div[style*="padding-bottom"]:not(.embed-breakout-wrapper):not(.embed-breakout-wrapper > div) iframe`
- `.table-breakout-wrapper table`

### 4 !important declaration(s)

- `.blog-posts-grid .post-card`
- `#blog-related-carousel-section .post-card-category`
- `#blog-related-carousel-section .pillar-card-carousel-text .post-card-category`
- `.embed-breakout-wrapper>div[style*="padding-bottom"]`

### 3 !important declaration(s)

- `.post-content-inner a.bg-ordio-blue:hover`
- `#blog-related-carousel-section .excel-visual-mini-container .flex.items-center`
- `.post-content-inner #ordioTextContent`
- `.post-content-inner [id*="ordioTextContent"]`
- `.post-content-inner [class*="px-6"]`
- `.post-content-inner [class*="px-10"]`
- `.post-content-inner [class*="xl:p-12"]`
- `.embed-breakout-wrapper`
- `.blog-page-body-gradient`
- `.blog-toc-nav`

### 2 !important declaration(s)

- `.post-content-inner .wp-block-embed iframe`
- `.post-content-inner figure.wp-block-embed iframe`
- `.post-content-inner .wp-block-embed__wrapper iframe`
- `.post-content-inner .wp-block-embed.is-provider-youtube iframe`
- `.post-content-inner .wp-block-embed.wp-embed-aspect-16-9 iframe`
- `.post-content-inner figure.wp-block-embed.is-provider-youtube iframe`
- `.post-content-inner figure.wp-block-embed.wp-embed-aspect-16-9 iframe`
- `.post-content-inner .wp-block-embed.wp-embed-aspect-4-3 iframe`
- `.post-content-inner figure.wp-block-embed.wp-embed-aspect-4-3 iframe`
- `.post-card-category.bg-ordio-blue`
- ... and 13 more

### 1 !important declaration(s)

- `[x-cloak]`
- `.blog-image-lightbox-modal[x-cloak]`
- `#blog-related-carousel-section .excel-visual-mini-container>div:first-child`
- `#blog-related-carousel-section .post-card-content`
- `#blog-related-carousel-section .post-card-image-wrapper`
- `#blog-related-carousel-section .post-card--compact .post-card-content`
- `#faq .max-w-5xl`
- `.blog-post-card-wrapper`
- `.blog-toc-item`
- `.blog-toc-toggle`
- ... and 15 more

## Recommendations

1. **Reduce selector depth** - Flatten nested selectors where possible
2. **Lower specificity** - Use classes instead of IDs, avoid deep nesting
3. **Remove !important** - Refactor to use proper specificity instead
4. **Simplify selectors** - Break complex selectors into multiple simpler ones
5. **Use BEM methodology** - Consider BEM naming to avoid specificity wars