<!doctype html>
<html data-current="post" lang="en-GB">
<head>
<!-- COMMON TAGS -->
<meta charset="utf-8">
<title itemprop="name">Classitis (class-eye-tiss) – The new CSS disease</title>
<!-- Search Engine -->
<meta name="description" itemprop="description" content="The blog of Steve - Web* Developer">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Classitis (class-eye-tiss) – The new CSS disease">
<meta name="twitter:description" content="The blog of Steve - Web* Developer">
<meta name="twitter:site" content="@steveworkman">
<meta name="twitter:creator" content="@steveworkman">
<!-- Twitter - Article -->
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="Classitis (class-eye-tiss) – The new CSS disease">
<meta name="og:description" content="The blog of Steve - Web* Developer">
<meta name="og:url" content="https://steveworkman.com">
<meta name="og:site_name" content="The blog of Steve - Web* Developer">
<meta name="og:locale" content="en-GB">
<meta name="og:type" content="article">
<!-- Open Graph - Article -->
<meta name="article:section" content="Web Development">
<meta name="article:published_time" content="2009-05-07T00:00:00.000Z">
<meta name="article:author" content="Steve Workman">
<meta name="article:tag" content="post,Web Standards">
<link rel="alternate" type="application/rss+xml" href="https://steveworkman.com/feed.xml" />
<link rel="me" href="https://webperf.social/@steveworkman" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>:root{--turkey:#fff0eb;--white:#fff;--blue:#1777af;--headingBackground:#bbdce8;--textColor:#282828;--visibleGrey:#ccc;--pageBackground:#fff;--articleBorder:#fff;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--turkey:#fff0eb;--white:#fff;--blue:#29b0ff;--headingBackground:#083444;--textColor:#f5f5f5;--visibleGrey:#ccc;--pageBackground:#333;--articleBorder:#2a2a2a}}*,:after,:before{box-sizing:border-box}body,html{color:var(--textColor);font-family:Avenir,Avenir Next,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;margin:0 auto;padding:0}header{grid-area:header}main{grid-area:main}aside{grid-area:aside}footer{grid-area:footer}body{background-color:var(--pageBackground);display:grid;grid-template-areas:"header header header" ". main main" ". aside aside" "footer footer footer";grid-template-columns:auto 3fr 1fr;grid-template-rows:auto 1fr auto auto;height:100vh;max-width:50em}@media screen and (min-width:750px){body{grid-template-areas:"header header header" ". main aside" "footer footer footer";grid-template-rows:auto 1fr auto}main{max-width:37.5em}}code,p,pre{line-height:1.5}a[href],a[href]:visited{color:var(--blue)}a[href]:not(:hover){text-decoration:none}footer,header,main{padding:1em}main{margin:0 auto;max-width:100%;padding-bottom:2em}main :first-child,main>article :first-child{margin-top:0}pre{direction:ltr;font-size:14px;-webkit-hyphens:none;hyphens:none;margin:.5em 0;padding:1em;-moz-tab-size:2;-o-tab-size:2;tab-size:2;text-align:left;white-space:pre;word-break:normal;word-spacing:normal}blockquote{position:relative}blockquote:before{color:var(--visibleGrey);content:"\201C";font-family:Georgia,Times New Roman,Times,serif;font-size:6rem;left:-2.5rem;position:absolute;top:-.5rem}header>em{display:block;font-size:2em;font-style:normal;font-weight:700;margin:.67em 0}header nav ul{list-style:none;padding:0}header nav ul :first-child{margin-left:0}header nav li{display:inline-block;margin:0 .5em}header nav li a[href]:not(:hover){text-decoration:none}header nav li a[data-current="current item"]{font-weight:700;text-decoration:underline}article{border-bottom:1px solid #eee;border-bottom:1px solid var(--articleBorder);margin-bottom:1em;padding-bottom:1em}article>h1,article>h2,article>header{background-color:var(--headingBackground);border-radius:.5em 0 0 0;font-size:2em;line-height:1.2;margin-bottom:.75em;padding:.25em .5em}article>h1>a[href],article>h1>a[href]:visited,article>h2>a[href],article>h2>a[href]:visited{color:var(--textColor)}article>header>h1{font-size:1.2em;margin-bottom:.25em}article>header>.subtitle{font-size:.8rem;margin-bottom:0}article>header>.subtitle>small{display:inline-block;width:50%}article>header>.subtitle>small:last-child{text-align:right}article img{display:block;margin-left:auto;margin-right:auto;max-width:100%;text-align:center}main>section>article>*{margin-bottom:.5em;margin-top:0}a[rel=tag],a[rel=tag]:visited{background-color:var(--pageBackground);border:1px solid var(--pageBackground);border-radius:.25em;color:var(--blue);display:inline-block;font-size:.625em;height:2em;letter-spacing:.1em;line-height:2em;margin:0 .5em .5em 0;padding:0 .5em;text-decoration:none;text-transform:uppercase;vertical-align:text-top}a[rel=tag]:hover{background-color:var(--blue);border:1px solid var(--blue);color:var(--pageBackground)}a[rel=tag]:last-child{margin-right:0}ul.taglist{font-size:.8em}ul.taglist li{padding-bottom:.25em;padding-top:.25em}form{display:grid;padding:2em 0}form label{display:none}button,input,textarea{font-family:Avenir,Avenir Next,sans-serif;font-size:1rem;margin-bottom:1em;padding:1em;width:100%}input,textarea{border:1px solid #000}button{background-color:var(--blue);border:1px solid var(--blue);color:var(--white);cursor:pointer}@media screen and (min-width:768px){:root{font-size:1.1rem}}.pagination>ol{list-style:none;padding:0}.pagination>ol>li{display:inline-block;width:50%}.pagination>ol>li.previous{text-align:right}table.speaking{border:1px solid var(--turkey);border-collapse:collapse}table.speaking td,table.speaking th{padding:.25em}table.speaking thead>tr{background-color:var(--headingBackground);border-bottom:1px solid var(--turkey)}table.speaking th{text-align:left}table.speaking .label{background-color:var(--headingBackground);border-radius:8px;color:var(--textColor);display:inline-block;padding:4px 8px}</style>
<script></script>
<script src="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.js" async></script>
<link href="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.css" rel="stylesheet">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-18282110-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-18282110-1');
</script>
</head>
<body>
<header>
<em>
<a href="/">Steve Workman's Blog</a>
</em>
<nav>
<ul>
<li><a href="/" >Home</a></li><li>
<a href="/about/">About Steve</a>
</li><li>
<a href="/speaking/">Speaking</a>
</li><li>
<a href="/bookshelf/">CSS Bookshelf</a>
</li></ul>
</nav>
</header>
<main>
<article>
<header>
<h1>Classitis (class-eye-tiss) – The new CSS disease</h1>
<p class="subtitle">
<small>
Posted on <time datetime="2009-05-07T00:00:00.000Z">07 May 2009</time> by Steve Workman
</small>
<small>About 3 min reading time</small>
</p>
</header>
<p>CSS has gone through many trends and phases in web development. Certain trends are welcome, like conditional stylesheets and developers refusing to do them for Internet Explorer 6. Other trends can have leave a web application with a disadvantage for the rest of its life, yes, in-line styles, I’m looking at you.</p>
<p>This is all well and good, people learn from their mistakes and in the end, best practice comes out. The latest trend seems to have brought us full-circle.</p>
<p>About a year ago, HTML was plagued by a trend known as divitis (div-eye-tiss), a syndrome where a web page was seemingly marked up entirely in <div> tags, making a mess of the markup and producing un-readable pages. This was mainly produced by new web developers who had just moved away from the safety of table-based design and into the world of web standards and can be easily remedied with some education on elements other than <div> and <br/>.</p>
<p>This disease now seems to have mutated and crossed over to CSS in a trend I’m calling <strong>classitis</strong> (class-eye-tiss). It’s easy to diagnose: the first sign is in the HTML. Look closely at each element, it may have a class attached to it. If it does, does the one above have the same one? If this repeats all over the page, you may have classitis. In the navigation of your site, do all the list items have the same class name? You may have classitis. The way to tell for sure is to dive into the CSS: If the styles are predominately classes (i.e. are “.className”) with ancestor selectors being few and far between, then you have classitis.</p>
<p>The root cause of such a syndrome relates to modern web programming languages, notably ASP .NET. I’ll try to explain: ASP has a number of helpful server-controlled elements which when processed turn into regular HTML elements. These all have their own unique identifier, but this is the reference for the server, not for CSS. Therefore, each of these elements can have a CSS class applied to it, and developers use this constantly. The real kicker is that ASP encourages you to use its own controls rather than standard HTML elements, making this disease especially prevalent amongst users of ASP. What makes this even worse is that ASP has been the default option for enterprise level applications for a while now, and Microsoft have made ASP accessible to new users with the Express editions of Visual Studio. It’s now easier than ever to start coding badly.</p>
<p>Is classitis really that bad? Well, no, but it’s what it comes with that can cause problems. A recent web site template that I was given by a company that shall remain nameless, was riddled with classisits, even so far as that there was an individual class for each font type and size. Surely setting a single class for the body would be easier and using ancestor selectors after that would provide for simpler HTML. The real problem here is maintainability: my task was to add another page which used a three-column layout rather than their two-column one. I’ve ended up duplicating their code to make my new layout fit, even then, changes made to their stylesheet won’t be reflected in my layout.</p>
<p>It’s a sorry state of affairs, but the remedy is simple, learn to use HTML elements properly. Some developers seem to forget that <html> and <body> are tags like all the rest and can be used to dictate the styles of the whole page. For users of frameworks like ASP, remembering that there are more elements than the ones the framework provides is very important; though don’t rely on the visual designer. Classitis is curable, and education on its prevention is important. Lets hope it’s caught before it becomes a pandemic.</p>
<p>
<a href="/tags/Web Standards/" rel="tag">Web Standards</a>
</p>
</article>
<nav>
<a href="/">Back to home</a>
</nav>
</main>
<aside>
<h2>Find me online</h2>
<ul>
<li><a href="https://webperf.social/steveworkman" target="_blank">Mastodon - @steveworkman@webperf.social</a></li>
<li><a href="https://www.threads.net/@steveworkagram" target="_blank">Threads - @steveworkagram</a></li>
<li><a href="https://www.instagram.com/steveworkagram/" target="_blank">Instagram</a></li>
<li><a href="https://www.github.com/steveworkman/" target="_blank">Github - steveworkman</a></li>
</ul>
<h2>Posts in other categories</h2>
<ul class="taglist">
<li><a href="/tags/Browsers/" class="tag">Browsers (10)</a></li>
<li><a href="/tags/Conferences/" class="tag">Conferences (1)</a></li>
<li><a href="/tags/CSS3/" class="tag">CSS3 (14)</a></li>
<li><a href="/tags/Facebook/" class="tag">Facebook (3)</a></li>
<li><a href="/tags/Genesys/" class="tag">Genesys (1)</a></li>
<li><a href="/tags/Gigs/" class="tag">Gigs (1)</a></li>
<li><a href="/tags/Google Wave/" class="tag">Google Wave (1)</a></li>
<li><a href="/tags/Hiring/" class="tag">Hiring (2)</a></li>
<li><a href="/tags/HTML5/" class="tag">HTML5 (20)</a></li>
<li><a href="/tags/Interviewing/" class="tag">Interviewing (1)</a></li>
<li><a href="/tags/iPhone/" class="tag">iPhone (12)</a></li>
<li><a href="/tags/JavaScript/" class="tag">JavaScript (14)</a></li>
<li><a href="/tags/Learning/" class="tag">Learning (1)</a></li>
<li><a href="/tags/Microsoft/" class="tag">Microsoft (10)</a></li>
<li><a href="/tags/Mobile/" class="tag">Mobile (12)</a></li>
<li><a href="/tags/Node.js/" class="tag">Node.js (1)</a></li>
<li><a href="/tags/Off-topic/" class="tag">Off-topic (11)</a></li>
<li><a href="/tags/Performance/" class="tag">Performance (5)</a></li>
<li><a href="/tags/Projects/" class="tag">Projects (2)</a></li>
<li><a href="/tags/Rails/" class="tag">Rails (2)</a></li>
<li><a href="/tags/Ramblings/" class="tag">Ramblings (20)</a></li>
<li><a href="/tags/Reading List/" class="tag">Reading List (1)</a></li>
<li><a href="/tags/Sketchnotes/" class="tag">Sketchnotes (19)</a></li>
<li><a href="/tags/Speaking/" class="tag">Speaking (7)</a></li>
<li><a href="/tags/Steel-Software/" class="tag">Steel-Software (2)</a></li>
<li><a href="/tags/Usability/" class="tag">Usability (9)</a></li>
<li><a href="/tags/USE/" class="tag">USE (16)</a></li>
<li><a href="/tags/User Experience/" class="tag">User Experience (11)</a></li>
<li><a href="/tags/User Interfaces/" class="tag">User Interfaces (10)</a></li>
<li><a href="/tags/Web Design/" class="tag">Web Design (12)</a></li>
<li><a href="/tags/Web Standards/" class="tag">Web Standards (33)</a></li>
</ul>
</aside>
<footer>
<small>
This content is © 2003-2023 Steve Workman and does not necessarily represent the views, strategies or opinions of my employer.<br>
This blog is made with <a href="https://www.11ty.io/">Eleventy</a>.
</small>
</footer>
</body>
</html>