In 1956, the New York Giants and Chicago Cardinals went head-to-head at the original Yankee Stadium. As the Cardinals made a late-game drive toward the end zone, Giants fans cried out for the New York defense to step up their game. They echoed just one word, “defense,” over and over.
Thus, the defense chant was born. It quickly spread through the stadium and took hold of fans at every game. The deafening roar of the defensive rallying cry spread to other New York teams. It could be heard in Madison Square Garden as the 1969 Knicks blazed a path to win the NBA Championship.
Strong defense gives teams a level of control against an unpredictable offense — and the element of chance. But superstar athletes and championship teams aren’t the only ones who benefit from defensive techniques.
When building a website, defensive CSS helps developers fend off attacks like bugs, unexpected behaviors or content that risks breaking a page. Ultimately, going on the defense is a strategy to build dynamic and accessible layouts that can ward off future — and unpredictable — problems.
William Paris, UX engineer at Ampersand, applies defensive CSS techniques to improve the interface of Ampersand’s site. He uses attributes and pseudo-states and pseudo-elements for selection, and though it’s slower in the render tree, he said, “it allows for selection without needing a class or ID, which can reduce template clutter and produce a cleaner layout.”
Paris told Built In NYC just how his defensive CSS technique can be used and how owning a technique like that can be encouraged by leaders.
Ampersand is a data-driven adtech company that uses audience data insights to give advertisers true measurements of their TV investments.
What is your favorite defensive CSS technique, and how has it allowed your website to be used in new ways?
I use attributes and pseudo-states and pseudo-elements for selection, which can help create a stronger user experience with elements like different background colors for alternating rows. Previously, techniques called for .odd and .even class names written programmatically. Now, with the :nth-child() and :nth-of-type() pseudo-elements, one could vary the color of every other or every fifth element without using class names and programmatic gymnastics. For instance, people addressing accessibility may find it useful to base selectors on aria- attributes and specific values could eliminate the need to write class names or inline styling to change an element’s display. Conceptually, if you need to toggle aria-expanded, aria-selected or aria-checked anyway to maintain proper accessibility, why change those attributes and class names?
Is this technique a common and well-known practice, a trick you learned from a colleague or something you invented yourself?
I doubt this technique is well known, and for me it’s self developed, but I also doubt I’m the first to use attributes and pseudo-selectors. I first embraced it when working on assets for various airlines and locales. Often, phrasing in one language can use differing characters in others. Being able to target styling based on language attributes creates greater flexibility.
It’s when bugs arise, deadlines are missed and less-than-ideal circumstances occur that character is demonstrated.”
What are the essential behaviors for a leader looking to exemplify and spread a culture of ownership across a team of engineers?
Leadership and ownership can’t be measured without adverse conditions. When things are going well, you will have no shortage of people looking for recognition and accolades. It’s when bugs arise, deadlines are missed and less-than-ideal circumstances occur that character is demonstrated.
Lead by example. The best way to convey expectations is to demonstrate an interest in meeting those expectations yourself. If you really think it’s important to be early for work, make sure you are often the earliest.
Ignorance is not a word. I’m ignorant of surgery or welding, but it doesn’t make me bad — just unskilled and unqualified as a surgeon or welder. Any qualified surgeon or welder should be able to remember two things: when they weren’t qualified and the journey it took to become qualified and skilled. Not knowing is something we all must face. We all had to learn the things we know: walking, talking and eating with utensils. Remove the stigma around not knowing an answer and encourage people to ask questions. Be willing to expand others’ knowledge and reduce Dunning-Kruger issues in the environment.
