I interviewed Thierry Koblentz, creator of Atomic CSS, to grasp the historical past and background that led to creating of the favored CSS framework. Thierry, now retired, has huge expertise writing CSS at giant scale and has beforehand labored as a front-end engineer at Yahoo!.
Thierry is extensively credited with bringing the idea of Atomic CSS to the mainstream, due to his now basic 2013 article on Smashing Journal, “Difficult CSS Finest Practices.” That article paved the way in which for a lot of well-liked CSS libraries over time. On this interview, Thierry returns to chronicle the historical past of Atomic CSS and mirror on its ongoing legacy.
Rolling again the years to the early 2000’s, how did you get into net growth, particularly writing CSS to make a dwelling?
Thierry Koblentz: I taught myself HTML, CSS, and JavaScript as a pastime after shifting to the U.S. in 1997.
On the time, I used to be utilizing FrontPage and was relying closely on Newsgroups for steering. I rapidly turned a daily on Macromedia NewsGroups and on CSS-Focus on. Early on, I espoused the philosophy of the Internet Normal Mission and obtained actually thinking about Accessibility. For years, front-end was nothing greater than a pastime for me (my actual job was an vintage supplier). I might create an internet site occasionally however I used to be largely writing and publishing (many) articles, sharing methods I’d realized or “found.”
This paid off within the type of a cellphone name from Yahoo! in 2007, asking if I may assist fixing and constructing stylesheets for the Yahoo! Web site Options (YSS) web site builder template. The job description: no HTML, no JavaScript, simply CSS! And lots of it!
What was your day job at Yahoo! like?
TK: My position at Yahoo! modified loads via the years.
My first job was to create stylesheets (à la CSS Zen Backyard) for the YSS template. I then rewrote the markup and kinds of the YSS web site simply earlier than YSS was “shipped” to Bangalore (India) — the place I used to be despatched with my colleagues for “switch of information” functions.
As a sidenote, it was the problem of swapping stylesheets to create totally different designs for YSS that compelled us to discover a mild (non-js) answer for resizing movies on the fly; and that’s how I got here up with “Creating Intrinsic Ratios for Video.”
After YSS, I had the chance to solely work on initiatives that began from scratch (rewrites or in any other case) and I obtained increasingly concerned with Yahoo! FE. I edited and created many inside docs (i.e. CSS Coding Requirements); participated within the hiring course of (like everyone else in my workforce); led code evaluation classes; ran CSS lessons and workshops; spoke at FED London; helped different groups with HTML/CSS/accessibility; was concerned in selections concerning expertise adoption (i.e. Bootstrap or not Bootstrap); created libraries; reviewed inside papers; wrote proposals; and so on.
One other sidenote, throughout my eight years at Yahoo!, I’ll have written lower than 100 traces of JavaScript. And if I didn’t stop or get fired from my job, it’s due to Lingyan Zhu and Renato Iwashima; they helped me tirelessly when it got here to organising my surroundings or coping with the command line (as a result of, to today, I’m horrible at that).
What have been the favored CSS writing practices prevalent on the time?
TK: Within the early days, there have been neither libraries nor revealed methodologies; it was the Wild West, every thing went: “non-semantic” lessons, IDs, CSS hacks, conditional feedback, frames, CSS expressions, “JS sniffing,” designing primarily for Web Explorer, and so on. On my outdated web site, I even had this remark:
<!–MSIE5 Mac wants this remark –>
All the pieces was truthful recreation and every thing was abused as we had a really restricted set of instruments with the demand to do loads.
However issues had modified dramatically by the point I joined Yahoo!. Devs from the U.Ok. have been sturdy supporters of Internet Requirements and I credit score them for vastly influencing how HTML and CSS have been written at Yahoo!. Semantic markup was a actuality and CSS was written following the Separation of Concern (SoC) precept to the “T” (which was overzealous for my liking at instances although).
YUI had CSS elements however didn’t have a CSS framework but. There was an in-house CSS library (referred to as Lego) however I by no means had to make use of it. Methodologies and libraries, like OOCSS, SMACSS, ECSS (shoutout to Ben), BEM, Bootstrap, Pure, and others would come shortly after.
What led to the concept of Atomic CSS?
TK: Earlier than YSS was moved to India, my supervisor, Michael Montesano, requested if there was a manner for the brand new workforce in Bangalore to keep away from having to edit the stylesheet, and thus lowering the dangers of breakage. I assume the YSS template expertise (paying clients complaining about damaged pages) made him fairly paranoid when it got here to creating any change to a stylesheet.
So I created a “utility-sheet” within the spirit of my ez-css library — a sheet meant to let builders obtain their styling with out the necessity to edit or add guidelines in a stylesheet.
A few years later, Michael, then Director of Engineering, requested me if I may redesign Yahoo!’s Residence Web page utilizing utility lessons solely, understanding that, as soon as once more, we wouldn’t be in command of the web site upkeep. We talked about prioritizing utility lessons over semantic lessons, one thing I don’t assume existed at such a degree on the time. It was a really daring transfer.
This massive scale train rapidly turned a proof of idea that confirmed the various advantages that got here with styling by way of markup. It checked so many packing containers that it was determined that we’d use that “static” stylesheet (referred to as Stencil) to revamp the Yahoo! My Residence Web page product.
What have been the guiding rules whereas designing Atomic CSS (ACSS) and who have been the folks concerned?
TK: Our Stencil library being static was an important software to impose/implement a design model — which we thought Yahoo! was about to undertake throughout all its properties. We rapidly realized that this was not going to occur. Each Yahoo! design workforce had their very own view of what was the right font dimension, the right margin, and so on., and we have been continuously receiving requests so as to add very particular kinds to the library.
That state of affairs was unmaintainable so we determined to give you a software that will let builders create their very own kinds on the fly, whereas respecting the Atomic nature of the authoring technique. And that’s how Atomizer was born. We stopped worrying about including kinds — CSS declarations — and as a substitute targeted on making a wealthy vocabulary to provide builders a big selection of styling, like media queries, descendant selectors, and pseudo-classes, amongst different issues.
With ACSS, builders have been free to make use of no matter they needed; therefore groups have been capable of undertake totally different design kinds and kinds guides whereas utilizing the very same library. And there have been some speedy advantages that have been new to the way in which builders have been used to writing kinds. They not needed to fear about breaking the web page with their styling or fear about writing selectors to model their elements.
ACSS was constructed at the beginning to handle Yahoo!’s issues and to work in Yahoo!’s surroundings.
The folks concerned with Atomic CSS have been Renato Iwashima, Steve Carlson, and myself. Renato and Steve created Atomizer.
What misconceptions do folks have about CSS after they don’t write CSS for big enterprises?
TK: After I joined Yahoo! in 2007, I rapidly realized how huge a codebase could possibly be. There have been groups working throughout many places/timezones; a myriad of merchandise; a whole bunch of shared elements; third-party code; A/B testing methods; scaling as a requirement; totally different script instructions; localization and internationalization; varied launch cycles; complicated deployment mechanisms; tons of metrics; legacies of all types; strict coding requirements; construct processes; politics; and extra politics; and so on.
Most of that was completely new to me and I needed to study if and the way any of it may affect the way in which I used to be writing CSS. I began to revisit and problem all my beliefs as many methods or strategies that have been frequent observe to me gave the impression to be unfit, or not less than counter-productive, for complicated apps.
One “actuality verify” pertains to model abstraction. All of us have learn articles saying that mapping a M-10 class to margin: 10px was not a good suggestion because it meant to edit each the HTML and CSS to alter the styling. Sadly, that is what occurs in giant/complicated initiatives:
Designer: I desire a 15px holeDeveloper: OK, that’s M-3x (5px increment)Designer: Positive, no matter!Developer: Executed!Designer: Really, 15px is a bit too large, are you able to make it 12px?Developer: No, we don’t have that, it’s both 10px or 15px.Designer: Sorry, that doesn’t work for me. Can we modify M-3x to be 12px?Developer: Nope! We will’t try this as a result of different groups count on M-3x to be 15px.Designer: OK, attempt to determine a manner as a result of we wish the margin to be 12px. 15px is an excessive amount of and 10px is just too little.Developer: (F*ck this!)
To anticipate such an issue, one wants to grasp the designer’s intent behind their request: is the model chosen due to its abstraction, e.g. shade main, or for its particular worth, e.g. a margin of 15px in our M-3x case? If a mode information exists to implement design rules, then lessons like M-3x could also be OK, but when design groups can request any model they need, then it’s a lot safer to avoid naming conventions that may result in ambiguous styling. In my expertise, something ambiguous leads, eventually, to breakages.
Counting on the construction of a doc or part for its styling — by way of combinators like > or + — appears like a clear method to authoring a stylesheet, however it’s ignoring the truth that in a posh surroundings one can’t assume any particular markup, or assemble, to be immutable.
You assume z-index is sophisticated? Suppose once more when you don’t even personal the scope of the stack your part lives in. That’s probably the most complicated points to handle in a big undertaking the place groups are in command of totally different components of the web page. I as soon as wrote a proposal about this.
Qualifying selectors — like enter.required vs. .enter.required — could look good and semantic however it creates an pointless specificity degree — like 0.1.1 vs. 0.2.0 — and prevents markup change; two issues straightforward to keep away from by ensuring you don’t qualify your selector.
Counting on the common selector, *, for styling international scope? In a really giant undertaking, it may imply you’re styling another person’s part. Don’t make styling selections for folks until you recognize their necessities.
I’m certain you’ve got learn that IDs are unhealthy and that specificity is evil however. in actual fact. excessive specificity is just not as a lot of an issue because the variety of specificity ranges your guidelines create. It’s a lot simpler to model inside an surroundings the place solely two or three ranges exist — like 1.1.0, 0.1.0, 0.2.0 — slightly than an surroundings the place specificity is slightly low however follows a “free for all” method — like 0.1.0, 0.1.1, 0.2.0, 0.2.1, 0.2.2, and so on. — which frequently comes as a defensive mechanism in giant initiatives as a imply to “sandbox” kinds.
Blindly following recommendation from the CSS neighborhood could result in disagreeable surprises. By no means leap on new methods that haven’t but been battle examined. Keep in mind will-change? And all the time know what each model you employ does or could set off. For instance, place can create a stacking context and a containing block, whereas overflow can create a block-formatting context.
In my expertise, understanding CSS inside-out is just not sufficient to jot down CSS effectively for a big group. Throughout my tenure at Yahoo!, I typically discovered myself in contradiction with folks I was aligned with years earlier than. The surroundings is brutal and one must be very pragmatic to keep away from many pitfalls. Subsequent time you take a look at the supply code of a big undertaking and see one thing that is not sensible to you, keep in mind this tweet from Nicholas Zakas:
As a substitute of assuming that persons are dumb, ignorant, and making errors, assume they’re sensible, doing their greatest, and that you just lack context.
— Nicholas C. Zakas (@slicknet) February 10, 2013
How was Yahoo!’s transition to Atomic CSS obtained internally?
TK: ACSS was properly accepted by our My Residence Web page workforce, however it didn’t go properly outdoors of that. Our first interplay was with the Sports activities workforce primarily based in Santa Monica. Steve and I have been in a convention name making an attempt to persuade the builders that not following the Separation of Concern’ precept was the way in which to go and that it will not create chaos.
We pointed them to a bit that Nicolas Gallagher had lately written, considering that an article from an “outsider” would assist, however nope! Issues didn’t go properly and there was lots of friction. The primary situation was the truth that the library was manufactured from utility lessons, however its syntax didn’t assist to ease the dialog.
I recall additionally assembly with the Mail workforce who didn’t push again on the concept of Atomic CSS, however needed to give you their very own JavaScript method to make use of “plain” CSS declarations — as they couldn’t stand the ACSS syntax. In any case, the knowledge in favor of the library (~36% much less CSS and HTML) was talking for itself, so ACSS was ultimately adopted. And immediately, seven-plus years later, Yahoo! Residence Web page, Yahoo! Sports activities, Yahoo! Information, Yahoo! Finance, and different Yahoo! Merchandise are all nonetheless utilizing ACSS.
To higher perceive how an method like ACSS can profit initiatives the place part reusability is paramount, copy the markup of a part from Yahoo! Finance and paste it inside Yahoo! Information. That part ought to appear like it belongs to the web page. It is because ACSS makes these elements web page agnostic.
How did the concept of utilizing parentheses for sophistication names manifest? Was the syntax impressed from how features are written?
TK: We had recognized — via many iterations — two units of “candidates” for use as delimiters for property values: parentheses, (), and brackets, [].
Renato remembers that we picked parentheses over brackets due to familiarity with features in JavaScript, even when it got here at the price of an additional Shift keystroke. The ACSS syntax was designed to:
facilitate the automated era of guidelines, by way of Atomizerenable builders to create any arbitrary or complicated kinds they wantreduce the training curve to a minimal
It seems to be like this:
[<context>[:<pseudo-class>]<combinator>]<Model>[(<value>,<value>?,…)][<!>][:<pseudo-class>][::<pseudo-element>][–<breakpoint_identifier>]Builders construct their lessons following the above assemble. The core syntax relies on Emmet, a well-liked toolkit. We adopted the Emmet method to cut back idiosyncrasies as core lessons are specific property/worth pairs slightly than arbitrary strings.
We additionally created a dozen of helper lessons. These apply a number of model declarations and are both shortcuts, like hiding content material from sighted customers, or hacks, like utilizing .Cf for clearfix. And we gave builders much more latitude via the usage of a config file through which they will create variables — like .PrimaryColor — breakpoints, and rather more.
Individuals who’ve by no means labored with ACSS will let you know that the syntax is just too bizarre (at greatest), however folks aware of it should let you know it’s intelligent in some ways.
Speak about how your “Difficult CSS Finest Practices” article for Smashing Journal got here to fruition?
TK: I had written many articles in varied on-line publications earlier than, so it was pure for me to jot down an article about this “difficult” method.
Yahoo! was sponsoring a front-end convention in October 2013 the place Renato had a chat scheduled to current our answer, and I used to be making an attempt to get the article revealed earlier than that. I selected to not publish it on Yahoo! Developer Community as a result of the web site didn’t supply a remark part. A Record Aside couldn’t publish it in time, however Smashing Journal accelerated its evaluation course of to have the ability to publish the piece earlier than the top of October.
My selection of going with a writer who had a remark part paid off because the article obtained 200-plus feedback which turned out to be very time consuming — and irritating — for me who had to answer them.
Does it really feel unusual that the article nonetheless carries the disclaimer in regards to the methods mentioned, despite the fact that it’s extensively well-liked within the business now?
TK: When the article was revealed, I instructed Vitaly [Friedman, Smashing Magazine co-founder] that that be aware appeared like some kind of a disclaimer to me; that it will sway folks of their studying of the article. However I didn’t actually push again as I understood the place Vitaly was coming from. I do discover it amusing that be aware remains to be there now this technique has develop into mainstream.
On condition that hindsight is 20/20, is there something that you just need to change about Atomic CSS?
TK: There’s all the time room for enchancment, much more so once you’ve pioneered the answer. You possibly can’t take a look at what others have achieved to study from their errors or shortcomings. You don’t have materials to enhance upon. So, it’d be pretentious for us to assume we nailed it on our first attempt.
On the Atomic CSS aspect, we had lots of expertise for having developed and used a “static” stylesheet on a big undertaking for greater than a yr. However on the dynamic aspect — the tooling aspect — it’s not like we may discover a lot inspiration on the market. Do not forget that it took six years for different libraries to observe go well with.
In French, we are saying: essuyer les plâtres.
One mistake we made was to make use of “Atomic CSS” because the title for acss.io, as a result of as John Polacek identified, it created some confusion. We’ve modified that title since then.
The one remorse I’ve is how the neighborhood has handled Atomic CSS/ACSS via the years, which lately result in a bizarre change, the place any individual defined to me what “Atomic CSS” means:
The Atomic CSS library [ACSS] makes use of the title however I feel that is deceptive, as a result of the characteristic you’re speaking about is the dynamic model era. “Atomic CSS” as a generic time period designates small selectors as atoms, however they’re static.
Speak about being erased. 😉
A giant due to Thierry for taking part on this interview and permitting us to publish it for the neighborhood.
The Making of Atomic CSS: An Interview With Thierry Koblentz initially revealed on CSS-Tips. You must get the publication and develop into a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!