grokking techtalk #16: f**k bad css
TRANSCRIPT
Cong PhamProduct Designer @ Anduin Transactionscong.ph [email protected]
Self introductionApologize for being a designerAsk whos in the venue write CSS daily?How did I get involved in this talk? Company party.
What is bad CSS? I will try to show you bad CSS with the following images and examples.
There are two types of people in the world
1.Ones who write well thought out, awesome and maintainable CSS, who have good night's sleep and fun weekends.
2.
Oh PeterI think this is quite related to many of us. Heres an example
z-index: 1000000;
Search for this on Github, theres almost 300,000 cases like this
z-index: 1000000;
I dont think the distance from the Moon to the Earth is higher than this
z-index: -999999;
Holy shit. Im in hell.
z-index: -999999;
.homepage-promos .grid-50 { width: 100%;}
.homepage-promos .grid-33 { width: 100%;}
.homepage-promos .grid-34 { width: 100%;}
Because all grids were created equal.
.product-tab { height: 568px; width: 99.753%;}
Let me try with 99%. Hmm that works. How about 99.75%? Wow, still works, lets try 99.76%. Oops that didnt work. Lets compromise on 99.753%.
.container-inner.promo-status { float: center;}
Im speechless. Fuck the spec, Im writing my own shit.
What the actual fuck?
Cest quoi ce bordel?
CLGT?
To sum up whats bad CSS, heres a nice joke from Thomas Fuchs
So what are some of the problems we faced at Anduin?
.pizza-shop { ...}
Wrapping of elements in a giant/custom class for a specific view/page. Lets say we have a view called pizza-shop. Wed create a file name pizza-shop. The first class that wraps everything is .pizza-shop.
.pizza-shop { .coke { ... }}
Now. In this shop we have coke that needs styling. So we add .coke
.sandwich-shop { ...}Can our sandwich shop have the same styling for its coke?
Lets say along the line of product development, we have a new sandwich shop. And it also offers coke. And all cokes are the same. Unless you have some Chinese cokes. Which you shouldnt have, seriously. That shit is poison.
.pizza-shop { .coke { ... }}.sandwich-shop { .coke { ... }}
Now, the bad and lazy way of doing this is copy whats in .coke for pizza-shop over to sandwich-shop. Hoping to pass the code reviewer, he turned out to be lazy and sympathize with you. Hell let you off the hook this time. But this is a problem because
Bad reusability
Not DRY
Variables arent centralized
We used to declare variables at the beginning of the files. Some values arent even in variables.
Deep nesting was insane
Use SCSS they say, its nesting feature is awesome they say. And we were like, hell yea! Which ended up with something like this
.pizza-shop { .menu { .drinks { .cold-drinks { .coke { ... } } } }}
and the outputted CSS looks like this
.pizza-shop .menu .drinks .cold-drinks .coke {...}
.pizza-shop .menu .drinks .cold-drinks .coke {...}
laugh now, cry later.
Turning on SCSS-linter was a
We turned on SCSS linter. And I was the new guy so I had to do the cleaning up job. And this picture was exactly what happened to me
The lack of systematic approach
1. No icon system
2. No appropriate color system$grey: ...;$lighter-grey: ...;$xtra-light-grey: ...;$dark-grey: ...;$darker-grey: ...;
3. No typographic system
I wont get into as this is more on the design side of things.
4. No layering system (z-index)
When something didnt layer right, we would try z-index: 2. Oh that didnt work, lets try 3, then 4, then n until it actually looks alright
5. No good naming convention.pizza-shop-front-door-container-wrapper {...}
5. No good naming convention.pizza-shop-front-door-container-wrapper {...}
We needed some rules to prevent this from happening. All of these problems resulted in something that Im eager to present to you today
Anduin Component Library
Introducing Anduin Component Library or ACL. Let me show you what is it
http://anduin.design/
The URL was anduin.design for those who wants to check it out by themselves. But please do that at the end of the talk please hehe
Things are organized based on components rather than views/pages
.btn {...}.card {...}.dropdown {...}.nav-bar {...}.well {...}
Remember the .coke example? Now .coke itself is a component and its styles can be reuse everywhere that needs a coke.
An organized page for all global variables.
We have a section on ACL site to show all the variables.
Clever.
New naming conventionhttp://rscss.io/
.card { ... .title { ... }
&.-primary { ... }}
.card { ... .title { ... }
&.-primary { ... }}
.card { ... .title { ... }
&.-primary { ... }}
.card { ... .title { ... }
&.-primary { ... }}
...
...
compares to Bootstrap
...
compares to Bootstrap
Im not even going to mention BEM, those ugly hyphens and underscores
A brand new icon set
You can see them in Icons section on the site. Im going to talk a bit about this though.
Icon font vs SVG icons
Icon font vs SVG icons
We started with an icon font we made ourselves, but then switched to SVG icons later that year. Heres why.
ProsDoesnt get pixelate@font-face is widely supportedYou can use CSS color property to change colorConsBrowser needs to load the entire fontHard to update when you want to add new iconsThey dont work like you want them toDealing with all the fonts properties isnt pleasantBrowser fallback on missing glyphs looks uglyEmojis are cooler nowadaysIcon font
ProsDoesnt pixelateExtensive customizationsBehave & render correctlyBrowser will only need to load the chosen SVG rather than the entire spriteXLINK:HREF is awesomeUpdating new icons is super easy (Grunt)ConsXLINK:HREF doesnt work on IE.SVG icons
ProsDoesnt pixelateExtensive customizationsBehave & render correctlyBrowser will only need to load the chosen SVG rather than the entire spriteXLINK:HREF is awesomeUpdating new icons is super easy (Grunt)ConsXLINK:HREF doesnt work on IE.SVG icons
ProsDoesnt pixelateExtensive customizationsBehave & render correctlyBrowser will only need to load the chosen SVG rather than the entire spriteXLINK:HREF is awesomeUpdating new icons is super easy (Grunt)ConsXLINK:HREF doesnt work on IE.SVG icons
A new z-index scale
// The z-index scale$z-index-1: 100;$z-index-2: 200;$z-index-3: 300;$z-index-4: 400;$z-index-5: 500;$z-index-6: 600;$z-index-7: 700;$z-index-8: 800;$z-index-9: 900;$z-index-10: 1000;
// z-index 2$z-index-calendar-dropdown: $z-index-2;$z-index-dropdown-list: $z-index-2;$z-index-hover-color-scheme: $z-index-2;$z-index-modal-content: $z-index-2;
// z-index 3$z-index-datepicker-field: $z-index-3;$z-index-dropdown-field: $z-index-3;
Better set of Utils classes
Show margin and padding
Last but not least, great documentation.
Nicer, cleaner and maintainable CSS codebaseBetter for developmentBetter for prototyping new productsEngineers can now do simple layout adjustments without asking a designer for helpThis acts as our UI style guide as well -> easier to onboard new hires
Were working hard on the next version of ACL and here are what to expect.
More components
More components
blueprintjs.com
Palantirs BlueprintJS is a kick ass component library that was released a few months back. Theyve done a great job and we want ACL to be like that, even better.
New ACL will include a library of different master layouts
again, this is a more design-centric topic, wont discuss here.
Modular CSS
Make ACLs utils more modular. Engineers can use these classes in HTML easily. This means less CSS will be written -> less headache.
Involve engineers in the development of ACLs next version
ACL1.0 was a project from Design team. Were hoping that this time, some engineers will also contribute on this, especially in providing these stateful components.
Further unifying and making UX patterns more consistent across all products
An example of this could be, an upload component should work the same way across all products. Before it looks the same but might not work the same.
http://anduin.design/
Once again heres the link to the site. And this also concludes my talk today. Thank you.