I spent a solid amount of time over the past couple months working on My Skool, a social networking app for potential international students and U.S. Universities; the idea is to allow potential students to foster relationships with faculty and alumni, and allow universities to have an additional avenue at attracting the best and brightest from around the world.
I took solid stock of the existing product, providing feedback to the team from several UX Audits, which were put into the existing product nearly immediately (GO TEAM!🎉🎉🎉). I also went into the Sass portion of the codebase, which was generally CSS that had been written in
.scss files. I took inventory of the existing styles, where and how they were used, and spent the bulk of my time structuring the styles based on a modified SMACSS approach which I’ve re-interpreted to take stock of components rather than global approaches (and being verrrry careful not to break anything in the process!). Basically, every component exists as its own small ecosystem as such:
/component - variables.scss - mixins.scss - index.scss
Having no outside dependencies, components can be simply added to and removed without any fear of unexpected breakages (not to mention code reuse across other projects). Likewise, having a solid structure makes this part of the codebase much, much more maintainable and scalable over time.
Now after re-structuring this part of the codebase, I then went in and really leveraged Sass’ functionalities to remove unnecessary code, which was by far my favorite part.
Many thanks To Harish, Luay, Vish, and everyone over at the My Skool team, you folks rule. 👏