The Rise of Junk Code

Have you ever opened the HTML view in Modern Campus CMS and thought, “What is all of this?”

We’re seeing a growing amount of unnecessary junk code in CMS pages. (This is not typically the case in WordPress.) In most cases, it’s coming from how content is being copied and pasted.

The biggest source of junk code seems to be Microsoft Teams and Large Language Models (LLMs) like ChatGPT. While these tools are useful for drafting content, copying directly from them can bring along hidden formatting and unnecessary code.

This shows up as things like:

• Unwanted <span> and <div> tags
• Excessive &nbsp; spacing
• Inline styling, such as specific font weights and colors
• Random and meaningless class names like SCXW123456
• Attributes like data-ccp-props, data-contrast, and xml:lang

The Problem with Junk Code

Junk code creates real issues:

1. It overrides website styling: Hidden styles can override the site’s design, leading to text that looks off. This will become more noticeable when the website is refreshed, and new styles are automatically applied to content. If custom formatting has been applied, it will override the new styles.
2. It creates accessibility problems: Extra markup can interfere with screen readers and other assistive technologies. We’ve also seen content that looks like it’s a heading (H2, H3, etc.), but it is custom formatting to look like a heading.
3. It slows down the site: Extra code slows page load time, which can lead to usability issues and lower search engine rankings.

How to Avoid Junk Code

The easiest way to avoid junk code is to not put in the CMS in the first place. Once it’s there, it’s much harder to deal with. Here are some things you can do:

• Paste as plain text: Use Ctrl+Shift+V (Windows) or Cmd+Option+Shift+V (Mac), or Paste Special > Unformatted text to paste without formatting.
• Use a text editor: Paste the text into a plain text editor like Notepad or TextEdit first, then copy it again to paste into the CMS.
• Format your page in the editor: Instead of copying formatting from another source, use the tools in the WYSIWYG editor to build your content. For example, create bullet lists using the bullet list tool in the toolbar rather than pasting in preformatted bullets from Word, Teams or ChatGPT.
• Review Code in CMS: Once you are ready to publish, go to the WYSIWYG editor and select <> in the toolbar to view the HTML. If you see a bunch of random junk, use the clear formatting function in the toolbar to clean the code formatting. This works for some code clean-up, but not all.

Use Siteimprove to Find Junk Code

As we discover new junk code patterns, we are creating custom policies in Siteimprove to flag where this code appears in the CMS. These policies can be reviewed by anyone with Siteimprove access by going to Policy > My policies. Type junk code into the Search to find policies that were created to flag junk code. To date, there are over 3,000 instances of junk code found.

As time is available, Marketing & Communications is addressing the issues, but the influx of junk code has grown substantially as more people use Microsoft Teams and LLMs to write content. Please do your part to ensure the content you are creating is clean.