I’m pretty sure I’ve written about this particular struggle before: while I can often grasp the mechanical concepts behind a New Thing, whether it’s coding or VFX or whatever, not having an idea of a “best practice” always throws me for a loop.

A lot of my interests involve processes that can be used to “solve a problem” although these are usually problems of my own design. One goal of problem solving, then, is to remain flexible and consider any potential solution. That kind of goes against the idea of a best practice which implies that there’s some kind of baseline, accepted, or even guaranteed approach to a task. While many tasks may have obvious, low-hanging-fruit solutions, relying on an accepted answer kind of negates the part of these tasks that I enjoy — finding a way to solve the problem I’ve given myself.

Right now, I am part of a team within my Star Citizen org that will be creating the tools that we as a group can use to manage our operations. Yes, this includes Yet Another Commodity, Mining, and Refining Tracker (there are many very good tools out there already), but it will also include other features specific to our group which will be exposed in both a Discord bot as well as a web application. I am the lead on the web application, so I’ve been throwing together some sample presentation ideas while the back-end group works on the data store. Part of this process has led me to re-evaluate how I have been working with React thus far.

For example, this morning I spent some time re-working a paradigm that I had been using for my Real Job which involves the component structure for a search-and-results display. A lot of the apps I have to build use this mechanic, so it’s one of the things that I have to write over and over, but differently in order to accommodate the needs at the time. As a result of this morning’s exercise, I realized that I had grossly overengineered previous work. Why? In part because I have had some pretty aggressive deadlines to meet, but also because I had no guidance on which methods might be more efficient, which were more robust, and which would work, but in the same way that a toolbox works if you stuff every tool in existence inside.

This is a typical “give myself enough rope and I’ll hang myself” situation.

In light of my new understanding, I also set about to figure how best to style my presentation layers. Being old school (and far less educated in regard to, and generally terrible at, design), I have relied on POCSS — plain old CSS which lives CSS files and is globally available to the entire site on-demand whenever it’s needed. As anyone who has followed this path knows all too well, this way lies madness as styles are added to make an existing style just that much different, or how some styles can be found abandoned in a dusty corner after having been unused for years.

Again, I hunted around the Internet this morning, but came across the same problem I have always had: everyone has an opinion on why Solution X, Y, or Z is Awesome, but no one can really explain why I might choose one option over all the others. I’ve looked at JSS, CSS in JS, CSS modules, and styled components. I’m not even sure what the difference is between most of them and can’t guarantee that some of those aren’t just different names for the same thing. What I do know is that there are many developers writing articles on Medium that talk about how fantastic their personal preferences are in this arena.

Are there no empiric benchmarks? No plain-talk side-by-sides? As an Elder Developer I have an inherent disdain for any developer who trumpets a technology based solely on their own excitement to be at the forefront of something “cutting edge”, but if there’s a new way of doing things that’s going to make my life easier, I’m willing to give it a shot. I need to know if it’s worth going down one path or another before I get too far to turn around, lest I feel compelled to commit to my choice strictly out of a stubborn unwillingness to start over again and again.

Right now, I think I am throwing my lot in with “styled components“, which I am not completely happy with because it requires that component tags represent styles, which when combined with React’s “components as tags” is completely going to confuse me in about six months. At least it’s pretty self-contained (relying on “local” definitions as opposed to the “global” definitions of POCSS) and requires less fiddling with config files than some of the other choices.

import styled from 'styled-components';

//Create a style applied to a standard HTML tag
const BodyContentWrapper = styled.div`
   margin-left:10px;
   margin-right:10px;
`
const BodyContent = styled.div`
    margin-top:10px;
    border-top:3px solid var(--blue-grey);
    border-bottom:3px solid var(--blue-grey);
    height:calc(75px + 80vh);    
`

const Main = (props) => {
     return(
        <div>
            <Header />

            {/* Apply the styled tags using the assigned name */}
            <BodyContentWrapper>
                <BodyContent className="two__columns">
                    <div id="sidebar__right" className="left__column">
                        <Sidebar sidebarState="hidden" />
                    </div>
                    <div id="body" className="center__column">
                        Content for the content gods!
                    </div>
                </BodyContent>
            </BodyContentWrapper>
        </div>
    )
}

export default Main

I have to keep telling myself that every choice is a choice, and sometimes there’s either no one choice better than any other, or that there is no one choice that is worse than any other. Although a lot of these technologies are in constant flux, and many require a significant number of hoops to set up and maintain, so long as the tech “does the job” to the extent that I need it to, then I guess it’s going to boil down to setting a course and not looking back.

Now the issue is going to be “when to use this fancy stuff, and when to rely on POCSS”? I could make every element a styled element, and I can also fall back on normal CSS classes and selectors, but then what’s the value in splitting hairs? Again, without guidance of some kind, I am feeling that I’m either short-changing myself or overcompensating by adopting the new paradigm everywhere, even when it ends up being overkill.