linked-stylesheet.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>Anti-Patterns From Linked Stylesheet</title>
 7  <link rel="stylesheet" href="external-styles.css">
 8  <style>
 9    body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
10    h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
11    h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; color: #6b7280; }
12    p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
13    .cards { display: grid; gap: 1rem; max-width: 28rem; }
14  </style>
15</head>
16<body>
17  <h1>Linked Stylesheet Anti-Patterns</h1>
18  <p class="intro">
19    These elements get their anti-pattern styles from an external CSS file.
20    Regex-only scanning misses these — only computed style analysis catches them.
21  </p>
22
23  <h2>Side-Tab (from external CSS)</h2>
24  <div class="cards">
25    <div class="external-side-tab">
26      <h3 style="font-weight: 600;">External side-tab class</h3>
27      <p style="font-size: 0.875rem; color: #6b7280;">border-left + border-radius from linked stylesheet.</p>
28    </div>
29  </div>
30
31  <h2>Top Accent + Rounded (from external CSS)</h2>
32  <div class="cards">
33    <div class="external-top-accent">
34      <h3 style="font-weight: 600;">External top accent class</h3>
35      <p style="font-size: 0.875rem; color: #6b7280;">border-top + border-radius from linked stylesheet.</p>
36    </div>
37  </div>
38
39  <h2>Clean Card (from external CSS)</h2>
40  <div class="cards">
41    <div class="external-clean">
42      <h3 style="font-weight: 600;">External clean card</h3>
43      <p style="font-size: 0.875rem; color: #6b7280;">Uniform 1px border — should NOT flag.</p>
44    </div>
45  </div>
46<script src="/js/detect-antipatterns-browser.js"></script>
47</body>
48</html>