How I Style React Components

I don't like putting CSS in Javascript, so I avoid it whenever I can.

It isn't ideal to avoid it entirely: sometimes you need to calculate a value for some style rule, or test some condition in order to assign the right className to an element. This is easily done with Javascript, but impossible with static CSS alone.

But JS-based solutions aren't right for me, either. The reasons I don't like them are that they stack on more complexity in order get around a simple process we already know how to perfectly well.

It also adds a lot of verticality to your javascript file. CSS rules are usually narrow and tall, with even the simplest rule requiring three lines or so. This means you either do a lot of scrolling past CSS to get to your Javascript, or you make sure to separate the styled JS into its own file, and import it properly. You should do this last part anyway, but nobody does.

After making fairly extensive use of some popular JS solutions, I settled on a process where all CSS is scoped to the component it provides style rules for. The styles are kept in a separate file, so they don't pollute your component javascript.

I use Stylus as a CSS preprocessor, because I like the absolute minimalist syntax and the consistent grammar of its built-in functions, but there is absolutely no reason you couldn't use SASS, or LESS, or any other preprocessor that supports nesting. You may use no preprocessor at all.

You don't even need to nest your styles if you don't want to, but if you don't, you will need to repeat the component class name on every line by hand.

Assuming I am working on a React component called DetailCard, my method is simply:

  1. Create a DetailCard.js file
  2. Make sure the Component's root element has className='DetailCard'
  3. Create a DetailCard.styl file
  4. Make the outermost style .DetailCard, and then nest all other styles inside it, like this:
.DetailCard
    background-color red
    h1
      font-size xx-large
      color white
    ul
      margin-top 2.4rem

.The key thing is that all styles are contained in, and scoped by, a classNamethat is tied uniquely to your component. This prevents the CSS from leaking into the global name space, at least in theory. If you have multiple components with the same name, that is a separate problem!

I'm of the opinion that trying to avoid global styles altogether is not worth the cost. It often leads to needlessly repeating the same styles over and over, because your strictly-scoped solution has kept you from reusing it. The C in CSS stands for Cascading, and you shouldn't be afraid of it.

Anyway, some CSS should be global, like reset or normalize, not to mention your site's typographical rules.

Perennials

We grow tired of everything but turning others into ridicule and congratulating ourselves on their defects.

— William Hazlitt

Design work

As a rule, the experienced designer does not begin with some preconceived idea. Rather, the idea is (or should be) the result of careful observation, and the design a product of that idea. In order to solve his problem effectively the designer must necessarily go through some sort of mental process. Consciously or not, he analyzes interprets, formulates. He is aware of the technological developments in his own and kindred fields. He improvises or invents new techniques and combinations. He coordinates his material so that he may restate his problem in terms of ideas, symbols, pictures. He reinforces his symbols with appropriate accessories to achieve clarity and interest. He draws upon instinct and intuition. He considers the spectator’s feelings and predilections. Briefly, the designer experiences, perceives, analyzes, organizes, symbolizes, synthesizes.

— Paul Rand

Evolution

Our minds are not quite designed to understand how the world works, but, rather, to get out of trouble rapidly and have progeny.

— Nassim Taleb

Secret signs and obscure languages

“The great, terrible, important powers of the world, like social caste and religious denomination, always rest on secrets. A man is born on the wrong side of the street and can therefore never enter into certain drawing rooms, even though he be in every way superior to everyone in those drawing rooms. When you try to find out what the difference is between him and the rest, and why he is accursed, you find that the reason is a secret. It is a secret that a certain kind of straw hat is damnable. Little boys know these things about other little boys. The world is written over with mysterious tramp-language and symbols of masonic hieroglyphics.“

— John Jay Chapman

What Happens at the Piteous Gate?

In The Book of the New Sun by Gene Wolfe, Severian and his traveling companions have an enigmatic and mostly off-screen encounter at Piteous Gate as they leave the city of Nessus at the end of book one.

Since book two picks up only after the encounter has concluded, we never get a direct explanation of what happens. This leaves many readers, myself included, wondering what took place there, and why Severian leaves it out.

For the record, I’m pretty convinced what Severian elides is an encounter with uhlans who were attacking people trying to leave the city. In short, after they cross the threshold of the Gate, they encounter a panicked scene where travelers are running away from the uhlans. In the fracas, Dorcas is hurt, and Severian becomes enraged, and kills some of the uhlans (and maybe some civilians as well).

He has a dream about this in chapter 1 of Claw of the Conciliator:

When I found light at last, it was the green road stretching from the shadow of the Piteous Gate. Blood gushed from Dorcas’s cheek, and though so many screamed and shouted, I could hear it pattering to the ground […] Dorcas was torn from my arms, and I drew Terminus Est to cut down those between us and found I was about to strike Master Malrubius, who stood calmly, my dog Triskele at his side, in the midst of the tumult..

This is scene is foreshadowed in chapter 13 of The Shadow of the Torturer, when  Master Palaemon is preparing to send Severian away from the guild. Master Palaemon asks:

“You know of the roads? […] I mean to warn you against them. They are patrolled by uhlans under orders to kill anyone found upon them, and since they have permission to loot the bodies of those they slay, they are not much inclined to ask excuses.”

It is also recollected in chapter 12 of Claw:

The day before, we had seen uhlans on patrol, men mounted much as we were and bearing lances like those that had killed the travelers at the Piteous Gate.

And again in chapter 1 of The Citadel of the Autarch:

At last the path joined a true road, something I had heard of often, but never trodden except in decay. It was much like the old road the uhlans had been blocking when I had become separated from Dr. Talos, Baldanders, Jolenta, and Dorcas when we left Nessus

And, lastly, in chapter 34 of Urth of the New Sun:

“They’ll be fixing dinner for us in Saltus, sieur. A good inn’s there.”

I answered, “I know,” thinking as I did how Jonas and I had walked therethrough the forest after the uhlans had scattered our party at the PiteousGate, of finding the wine in our ewer, and many other things.

None of this bullet proof evidence, but taken together I think it amounts to a fairly tenable position.

What was left out of the end of book one is not lost, but rather is scattered throughout the narrative, as though Severian could only conceal it from us, not get rid of it altogether.

Or, that Severian writes from the perspective of someone with perfect memory, and so does not consider the difficulty of tracking so many questions beyond the horizon. When the answers finally appear, we don’t even remember we were looking for them, so we usually don’t pay attention. Our eyes keep moving, looking for whatever is related to the present moment, unconcerned with the distant past. 

And then there is the old Wolfe trick of hiding things in plain sight, where we are least likely to see them. I don’t know how many times my eyes have passed over those five separate, clearly-stated explanations for what I would once have called a real enigma.

This is a common variety of puzzle in The Book of the New Sun: Severian edits his narrative to distract from the parts he’s not proud of, but leaves in enough for us to infer what actually happened. I’ve suspected that all the riddles in this book are solvable, and I would guess that, like this one, most are a matter of reading the books more attentively than we are usually capable of.

The educated horseman

Though he got no pleasure from pursuing the fox, he also rode to the hounds in a manly fashion that combined both energy and his habitual sloth. Sir John Hawkins wrote, “he showed himself a bold rider, for he either leaped, or broke through, many of the hedges that obstructed him. This he did, not because he was eager in the pursuit, but, as he said, to save the trouble of alighting and remounting.” … He was greatly pleased when his horsemanship… was praised by an expert, who remarked that he had brawn as well as brains: “Why Johnson rides as well, for aught I see, as the most illiterate fellow in England.”

— Jeffrey Meyers, Samuel Johnson: The Struggle

Priorities

The causes of events are always more important than the events themselves

— Cicero

The fourth dimension

“Only our concept of time makes it possible for us to speak of the Day of Judgment by that name; in reality it is a summary court in perpetual session.”

— Kafka