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 {
10 margin: 0;
11 padding: 24px;
12 background: #f9fafb;
13 color: #111827;
14 font: 14px/1.5 system-ui, sans-serif;
15 }
16
17 h1 {
18 max-width: 1080px;
19 margin: 0 auto 8px;
20 font-size: 34px;
21 line-height: 1.05;
22 }
23
24 p.intro {
25 max-width: 1080px;
26 margin: 0 auto 24px;
27 color: #4b5563;
28 }
29
30 .grid {
31 display: grid;
32 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
33 gap: 32px;
34 max-width: 1080px;
35 margin: 0 auto;
36 }
37
38 .col h2 {
39 margin: 0 0 14px;
40 color: #475569;
41 font-size: 13px;
42 letter-spacing: 0.08em;
43 text-transform: uppercase;
44 }
45
46 .cards {
47 display: grid;
48 gap: 14px;
49 }
50
51 h3 {
52 margin: 0 0 4px;
53 font-size: 15px;
54 line-height: 1.25;
55 }
56
57 .cards p {
58 margin: 0;
59 color: #4b5563;
60 }
61 </style>
62</head>
63<body>
64 <h1>Linked Stylesheet Anti-Patterns</h1>
65 <p class="intro">
66 These elements get their anti-pattern styles from an external CSS file.
67 Regex-only scanning misses these — only computed style analysis catches them.
68 </p>
69
70 <div class="grid">
71 <section class="col" data-col="flag">
72 <h2>Should flag</h2>
73 <div class="cards">
74 <div class="external-side-tab">
75 <h3>External side-tab class</h3>
76 <p>border-left plus border-radius from a linked stylesheet.</p>
77 </div>
78
79 <div class="external-top-accent">
80 <h3>External top accent class</h3>
81 <p>border-top plus border-radius from a linked stylesheet.</p>
82 </div>
83 </div>
84 </section>
85
86 <section class="col" data-col="pass">
87 <h2>Should pass</h2>
88 <div class="cards">
89 <div class="external-clean">
90 <h3>External clean card</h3>
91 <p>Uniform 1px border from the linked stylesheet.</p>
92 </div>
93
94 <div class="external-neutral-side">
95 <h3>External neutral side rule</h3>
96 <p>Thick side border, but the color is structural gray.</p>
97 </div>
98
99 <div class="external-square-top">
100 <h3>External square top rule</h3>
101 <p>Heavy top border with no rounded card corners.</p>
102 </div>
103 </div>
104 </section>
105 </div>
106<script src="/js/detect-antipatterns-browser.js"></script>
107</body>
108</html>