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.

2 Comments

  • Nimgimli

    December 9, 2021 - 6:11 PM

    Just as a way of commiserating with your CSS stuff, specifically. At my Real Job the powers that be have dictated that all sites will be built using Divi, which is a bloated whale of a customizable theme for wordpress. When I need to change one of these sites (none of which I was involved in building) I have to find a particular CSS style either in the Divi theme or the Divi child theme or the wordpress “customize theme” area or the Divi “theme settings” area and I may be forgetting some places. And everyone adds !important to everything so they don’t have to work backwards to find the original definitions.

    And man are these sites bloated!

    I mean this is WAY down the complexity ladder from where you are but generally I feel like we need some kind of standard for clean, modular CSS. And maybe there IS one and I’m just unaware of it.

    • Scopique

      December 10, 2021 - 7:11 AM

      I feel YOUR pain! I used Divi for a while, and even attempted to customize it, so I’m right there with you. Thoughts and prayers, man.

Leave a Reply

Your email address will not be published. Required fields are marked *