Article Continues Under
This fall, my staff began a brand new undertaking and for the primary time in an extended whereas, I used to be working with one other developer as I began to write down the types for the interface. In reality, I began the types, after which went on trip whereas they took over.
This undertaking has been an train in writing modular CSS, which I like, when working in a staff. Having been a solo front-end developer for fairly a while, this was a brand new problem to me. Once you need your CSS to be reusable, how do you have got a number of individuals working in git branches on completely different pages with out writing fully separate types?
Shock: it’s probably not about how we write CSS, it’s in regards to the course of.
Communication
Communication is the most important piece of constructing this work. As we work all through the day, we discuss in regards to the types we’re writing and the place they is perhaps used throughout the appliance, so the opposite particular person is aware of how work in progress may influence the elements of the appliance they’re targeted on.
For instance, if I modify a wrapper to satisfy the brand new design spec and wish to be constant throughout the whole software, I point out that it’s been modified, what’s modified about it, and the department the place I’ve accomplished this. When my coworker normalizes buttons in a single department, they let everybody know that this can be taken care of for the entire staff when that department will get merged into the grasp department.
Code evaluation
I’ve labored on groups that did code evaluations, however my present staff didn’t at all times do them as we labored. Because the staff grew, we determined to include code evaluations into our course of. The most effective a part of a code evaluation is studying from one another. Possibly the way in which I’ve accomplished a structure works, however may it’s higher? Are there types I’m not accustomed to that may make it higher?
Once we evaluation code, we focus on our modules to make sure everybody agrees they’re going to be the easiest way to maneuver ahead. When speaking by how you can use SVGs in our code, as an example, we focus on when it’s acceptable to make use of them as background pictures versus pictures, or inlining them by placing the SVG code proper into the template.
Documentation
Lastly, we got here up with what’s vital to our staff when writing CSS and we documented that. We use the concepts from Jonathan Snook’s SMACSS to information us, together with explaining options of Sass we wish to keep away from (similar to nesting), so the whole staff has a straightforward reference.
By making this specific, we are able to refer again to it for reminders as we evaluation code. Within the close to future, we additionally hope to construct a method information to additional doc our work. That manner, we’ll have documented how we wish the code written, and we’ll have a extra visible documentation of the types we’re utilizing to retain consistency as we proceed engaged on the appliance.
As a staff grows there are at all times bumps alongside the way in which, however it’s been an ideal problem to begin documenting our course of, desirous about how we write CSS in a extra formal manner, and reviewing it collectively to ensure we’re all on the identical web page. For me, the problem of going from being the one particular person writing the whole lot, to including new staff members and dealing collectively, has been incredible.