Four CSS Tools to Keep Your App in Style in 2019
While the web development landscape is changing at breakneck speeds all the time, engineers don’t typically think of CSS as a central aspect of the evolution. Changes by Sass, LESS, and SCSS introduced the development community to greater control over syntax and conventions the ecosystem desperately needed — though that’s only scratching the surface. Like it or not, CSS is a daily part of life as a developer. Here are a handful of the top tools used by AdHawk Engineering to enhance productivity and readability throughout our applications.
Maximum Utility
AdHawk’s stylesheets are kept to a minimum thanks in large part to the utility classes found within Bootstrap. An added benefit of keeping the directory lightweight is the readability within view templates.
The following one-liner will invoke predefined classes without the need to manually set styles:
The above shows a simple way to modify font & background color and only display an element on screen sizes larger than mobile.
Another utility worth noting is the justify-content series using flexbox, an alternative to the 12-grid structure of Bootstrap. It’s particularly useful for items that need to be centered or fit beyond the confines of a column.
When mockups differ between screen sizes, the order utility has saved the engineering team a lot of headaches. Rather than creating various templates for different screen sizes, elements are transposed via specific declarations for varying displays. Take this bit of production code:
The contact us / products / hours / map elements play musical chairs with each other to meet the needs of the design build, all with a simple class declaration.
A Convention to Style the Styles
When using custom classes is unavoidable (i.e. custom variable fonts, pixel specific margins) BEM, standing for Block-Element-Modifier, gives strict style formatting for class names providing consistency across the application for all developers. Since it’s often said the hardest part of programming is naming things (forget about caching for now) the uniformity this brings will give the application a collective voice, rather than stylistic flairs across separate pages.
Blocks are standalone entities, such as headers, containers, and inputs. These differ from Elements, a part semantically tied to the block, like menu item, title, or caption. Finally, Modifiers, a flag on the block that changes appearance or behavior, like disabled, highlighted, or large. Class names always begin with a block, then sequentially follow by elements with two underscores (‘__’) and modifiers with two dashes (‘ — ’).
An example of all three (Block, Element, Modifier) is:
Besides enforcing a convention, another huge plus is making every BEM class unique, as different blocks don’t share the same class names. Say goodbye to your CSS unintentionally affecting another element!
Modern Modules for the Universal Grid
With nearly 8000 stars on its Github repo, Reactstrap is a lightweight node module that extends Bootstrap’s grid and elements into React’s frontend with a single import from Reactstrap. The elements are the same ones recognizable from Bootstrap (buttons, navbars, columns) that are then compacted into React components (<Button>, <Nav>, <Col>).
A great example of what’s possible with these building blocks is the Admin interface over at Reduction. All elements were composed with Reactstrap (with Chart.js for charts), giving the layout a clean and modern look.
All Together in a Story
Storybook is a UI component explorer, placing all components in isolation under the umbrella of a library. While not exclusively a ‘CSS Tool’ per se, Storybook has a multitude of features that encourage CSS storage and productivity.
It’s exploding in popularity for convenient browsing and code-swapping, as well as the ability to mock specific cases as stories. The interface of Storybook is minimal and intuitive. Any codebase in React, Angular, or Vue can integrate Storybook in a process just like installing any other NPM module.
In this following example, reusable layout components are stored for easy previews and compartmentalized code.
With a convenient browsing structure that allows any team member to view isolated components, Storybook makes worrying where a code snippet lives within an application a relic of the past. The ecosystem of Storybook is thriving, with several add-ons becoming mainstream — including options for linking stories together (useful for demos), editing React props dynamically, adding notes, displaying stories with different layouts, and adding support within Google Analytics.
Conclusion
In my past year at AdHawk, the tools mentioned above have saved me personally a significant amount of engineering time. Try them out for yourself, if you haven’t already, and drop me a line to let me know how it goes!
