Grokking TechTalk #16: F**k bad CSS

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%;}



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



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.

Technology

Grokking TechTalk #16: F**k bad CSS