Published in


Adobe Xd driven Error, or more importantly — why keeping DRY is very useful

DRY — don’t repeat yourself. It's a basic principle of clean code. This week I caught an error in our front-end code, which reinforced the need to keep to this principle. It started a while ago when our designer produced some great designs. Our designer used Adobe xd to pass their designs to us, the dev team, and we took the styles literally.

Photo by Bradley Dunn on Unsplash

Here is the adobe screenshot;

From Adobe Xd properties page

For context — we are porting to a React UI, all very nice and cute. Very component-based. We had a couple of false starts, but now we have a folder of pages and a folder of re-usable components. Each component has its own styling page. We’re using semantic CSS (SCSS driven). For those like me, and the 5 other developers who have committed the same two lines below. ‘Semibold’ isn’t a font, it's a font-weight. See the git change for the before and after.

rad — what was there, green — the replacement

This error was repeated over 100 times. I corrected every damn one by hand. We’re very good at keeping DRY, and SOLID in our back end code. Using React as a front end framework makes that task much seemingly much harder.

Then I had a coffee. Realizing that we had made the same mistake with the regular font weights as well.

Determined not to repeat the mistake that took an hour to fix, I remembered that Scss allows mixins, they’re kinda cool. They allow you to compartmentalize style rules as reusable code. We already had a common base scss style page, but I added in mixins for the semibold font, then searched the codebase to see if we had made the same mistake for other font weights.

Common Scss Page

Then I repeated the process for regular and bold fonts. This still took a long time also. However, I won’t get caught again if we need to change all the fonts. They are all in one place now.-


Adobe — Please consider doing something for us non-designers who read the specs in xd. Maybe a pseudo-CSS output. We won’t need perfect, we can change it after. Alternatively, make it obvious that semibold is a weight. Even the devs that knew that it was a weight still made the commit for semibold being a font.
When making react components, a stylesheet for each component is a huge mistake if you are reusing common things such as this. Writing things once, then referring to them, using the mixin mechanism makes the process much easier.

Sematic CSS markup is cool, but maintainable code is cooler.




Everything connected with Tech & Code. Follow to join our 900K+ monthly readers

Recommended from Medium

How to implement ADFS- SSO login in NodeJS and ReactJS

Next-generation JS concepts

React-Redux Easy Explanation (2/2)

What is React Query

JavaScript Could DIE in 2022 If A Massive Meteor Wipes Out All Life

Javascript methods

Dark mode & custom colors in Quasar.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Brian Jones

Brian Jones

Coder, Dad,

More from Medium

Breaking the code to coding

What is Recursion ? What is Recursion ? What is Recursion ?

Pair Programming

Two developers sitting at a desk together. One is typing, the other is looking pensive.

Most Popular & Used Best Javascript Framework of 2022