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:
- Create a
DetailCard.js
file
- Make sure the Component's root element has
className='DetailCard'
- Create a
DetailCard.styl
file
- 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 className
that 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.
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.