We asked web builders that we admire the same question: What is one thing you learned about building websites this year?
Here’s what they told us.
We would like to thank our ❥ sponsor Automattic for making this site possible. They make many great software products that we use, like Jetpack, WooCommerce, and WordPress.com.
2020 brought another wave of logical property features to major browsers and I’ve thoroughly enjoyed my investment into logical, rather than physical, web styling. I feel like I’ve learned a new way to speak about the box model that results in less written code with more global coverage.
Like I described in the web.dev article I linked to above, a logical property is one that references a side, corner, or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s strong arm, rather than assuming it’s their right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.
Once I got the hang of the updated syntax, I realized other places in the world had already solved their problems similarly! The web was just late to logical jargon. Here are a couple of other places that have already gone logical.
Port and starboard are logical sides of the ship that are contextual to the vessel. I love how Wikipedia says confidently:
… nautical terms of orientation deal unambiguously with the structure of vessels, referring respectively to the left and right sides of the vessel, seen by an observer aboard the vessel looking forward.” Vessel centric logical properties. While working with ships, use a ship language.
Skier’s left is logical direction that’s based on a skier facing down the mountain. Without the logical language, skiers were confusing left and right, since it depended on where they stood when they declared the direction. If you’re on a chair lift facing up the mountain, left is right and right is left once you’ve gotten off the lift and started skiing back down the mountain. So that community came up with a logical way to talk about the direction. Their terminology, “Skier’s Right” and “Skier’s Left”, are essentially contextual logical properties. While working with skiers, use skier language.
Similarly, film studios use terms like “Stage One” and “Camera Two”. It helps logically orient everyone based on a common understand, not a relative direction.
As an industry or community, we have had issues with physical focused styles. Adding padding to the left and right of a button is only fitting in some languages. It’s like you wrote the padding while facing the wrong way on the ship. Logical properties, via inline-start and inline-end, will fit all languages. It won’t matter which way you’re facing in the ship, it’s not about you anymore.
Give logical properties a play in the Pen below. Notice the browser is doing tons of work to keep your content readable across the globe. So rad.
To emulate the confidence that Wikipedia had in nautical logical directions: We, the web, can now unambiguously deal with the structure of our boxes by referring respectively to their sides, contextual to language direction. Describe the side once, in a way that is still relevant to you, but now relevant to everyone else too. Think less, deliver more.
It’s critical to me that logical properties are centered around people. Its user-centric because its language direction respective. By using logical properties we invite the individual to bring their diversity, complexity and unpredictability to the table; we can embrace it and rely on the browser engines to properly lay it out.
Drop “top” and “left”-style thinking, and starting thinking logically with “block” and “start”-style properties. While working with web boxes, use a web box language.
The web’s “magic paper” is now even more magical as it can stay as natural to the user as possible. I love it.
P.S. You’ve been getting logical property trained since flexbox.
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.
You may write comments in Markdown thanks to Jetpack Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (“`) with double new lines before and after. All comments are held for moderation. Be helpful and kind and yours will be published no problem.
The related posts above were algorithmically generated and displayed here without any load on my server at all, thanks to Jetpack.
CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. The tech stack for this site is fairly boring. That’s a good thing! I’ve used WordPress since day one all the way up to v17, a decision I’m very happy with. I also leverage Jetpack for extra functionality and Local for local development.
*May or may not contain any actual “CSS” or “Tricks”.
CodePen is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations.
CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match.
ShopTalk is a podcast all about front-end web design and development.
