The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
CreativelyNanda.co.za, a South African literary and commercial site, went through a structural refinement that set two firm rules: its prose would not use em dashes, and its layouts would follow a standardized equal-thirds structure across most sections. The author, Nandawula Kabali-Kagwa, explained the reasoning in a first-person post on DEV Community. The changes were aimed at predictability for readers, not at a measured improvement, and the post is the author’s account of her own decisions rather than an independent test of their results.
What changed on the site
The refinement covered four areas, each described by the author:
- Equal-thirds layouts extended across several content sections.
- A no-em-dash rule applied to the site’s writing.
- Print styles for the pages that still used the original navy palette.
- Two implementation fixes in the product-page build and in CSS selector handling.
Equal-thirds layouts across the site
The author says the equal-thirds structure was carried into the shop, the Notion integration, the business archives, the Poem Wall, the legal pages, the roots section, the testimonials, and the imprints. The post describes the structure as a shared arrangement rather than publishing the underlying grid code, so the exact column values and breakpoints are not stated in the source.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteThe stated goal was navigational consistency. When literary work and commercial content appear on the same site, the author wanted a reader who learns how one section is organized to find the same logic elsewhere. In her words, “Layout drift is the silent killer of frontend polish,” and the choice was meant to create “predictable mental models for users navigating heavy literary and commercial content simultaneously.”
#1 Best Overall
That is design intent. The post offers no user testing, no analytics, and no before-and-after comparison, so it does not show that navigation became easier. It shows what the author set out to achieve and why she considered consistency worth enforcing across page types.
Why the site dropped em dashes
The author adopted a strict rule against em dashes in site prose. Her aim was to make writers reach for other tools: hinge words, deliberate pauses, and shorter lines that carry a sentence’s logic without a dash doing the joining. She describes em dashes as a crutch for “run-on architectural logic” in copywriting, and she argues that they can make text harder for parsers and readers to follow.
This is a stated editorial preference, not a general finding that em dashes reduce readability. The post does not cite studies, and it does not claim that em dashes are wrong in all writing. The rule is a house constraint, chosen to shape how this particular site’s copy is written.
If you apply a similar rule, the substitutes are usually one of the following:
Rank #3
- Split the thought into two sentences with a full stop.
- Use a comma where the dash only marked a short aside.
- Use a colon when the second clause explains the first.
- Use parentheses for asides that can be removed without changing the sentence.
- Use a hinge word such as “because,” “so,” or “which” to make the relationship explicit.
Print and offline styles
The author made the remaining navy-palette pages print accurately. She ties this to the realities of load shedding in South Africa: “In a region where load shedding is a structural reality, thinking about how a web page behaves when printed or saved offline isn’t a retro novelty, it’s robust engineering.”
The post names three specific fixes:
- White labels on colored buttons stay legible in print.
- Forge masthead pockets align with their wording.
- Stage-reel captions stay directly under their frames.
The account does not name the printer, browser, paper, or test method used to check these results, so readers should treat them as the fixes the author applied rather than verified print behavior across devices.
Implementation fixes
A comment inside a JSX conditional broke the product-page build
The author reports that a stray comment inside a JSX conditional broke the product-page build. She reflects that “JSX parsing edge cases will catch you off guard if your components mix declarative markup with raw scripting comments.” The post does not include the code, but the general JSX rule explains the category of failure. Inside JSX markup, a // line comment is not a comment: it is rendered as text or causes a parse error. Comments placed between JSX elements need to be wrapped in braces, as in {/* note */}, or moved outside the markup entirely.
Escaping CSS remap selectors
The author also reports escaping CSS remap selectors to resolve specificity problems. The post does not show the selectors. Escaping is needed whenever a class name contains characters that have a meaning in CSS selector syntax, such as the colon in utility-style names like md:flex, which must be written as .md:flex. Without escaping, the selector is invalid and the rule silently does not apply.
What the evidence supports
The source contains no quantified results, no named studies, and no measured outcomes for either the layout or the typography rule. It is a practitioner’s explanation of decisions made for one site. That makes it useful for understanding the reasoning and the trade-offs the author weighed, and weak as proof that the choices improved reading, navigation, or print quality.
Deciding whether to adopt similar conventions
A site with a different content mix may reach different conclusions. Before copying either rule, check the following:
- The reader task. Do visitors move between literary and commercial content, or do they arrive for one task at a time?
- Consistency across page types. Would a shared layout help users, or would it flatten pages that need different structures?
- Print behavior. Do readers print or save pages, and which colors, labels, and captions must survive that process?
- Implementation cost. How many templates and components must change, and how will the rule be checked in the build?
- Readability evidence. Is there evidence from your own audience, not only the editorial preference of the author?
- Maintenance burden. Who will enforce the rule when new content is added, and what happens when a page needs an exception?
Source
The article is “Building for Real Realities: Why We Eliminated Em Dashes and Standardized Equal Thirds” by Nandawula Kabali-Kagwa, published on DEV Community. The copy available is dated 1 October, and the year is not shown on that copy. The details above are drawn from the author’s own account, which is available at the DEV Community post.
The Bottom Line
The site’s choices are sound as a set of decisions for one literary and commercial publication, but they are the author’s judgments rather than proven results. Adopt the equal-thirds structure or the dash rule only if your own readers, print needs, and maintenance capacity support them.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
