

Apple Is Using Sass, And They’re Doing It Wrong - kaelig
http://blog.kaelig.fr/post/51078221503/apple-is-using-sass-and-theyre-doing-it-wrong
Today Apple redesigned the homepage of the online Apple Store. I was having a look at their code and I found out some interesting code smells that apparently even the most skilled developers will commit.
======
coldtea
> _That’s 7 levels deep (sic.). On top of being quite inefficient and
> generating a large amount of code, these styles are completely un-
> reuseable._

That's kind of the whole idea.

It's supposed to help to not mess other parts of the page when they change
something.

Their page design is not supposed to be overall consistent and re-usable. They
are supposed to be able to do long or surgical changes to any individual
section at whim, without affecting anything else -- having sections with a
unique new look weeks before updating anything else, or creating special
purpose looks for different sections.

For this purposes, reusability and less nesting would be a nightmare.

~~~
russelluresti
Even if you don't care about reuse, wouldn't it make more sense to just do a
selector like ".my-completely-and-totally-unique-class-name" instead of
nesting so many levels deep?

~~~
smrtinsert
If you want to see how that turns out, check out ExtJs thousand line sass
files. Nesting or namespacing is DRY 101 in my book and I prefer my projects
with this as well.

------
ambiate
This is off topic, but in the recent months there has been an influx of these
informative blog posts with animated gifs that are not really relevant to the
information. Is this just a side effect of being a Tumblr user/community
member? The more snarky pictures, the higher your view count/loyalty?

I ask, because they are distracting and shred any seriousness laid out in the
article. Some of these articles are rich in content, but reading them at work
with flashing/animated nonsense feels like I am viewing Reddit to people
passing by.

~~~
fusiongyro
I hate to say it, but I agree completely. Forgive me for wanting engineering
articles to look like... engineering. I wonder if this is just a generational
thing. I don't have a bucket full of GIFs to drop on an article.

It seems to be tapering off lately, but it used to irk me greatly when a
technical blog article would have a bunch of random photos stitched in that
had absolutely nothing to do with the content.

------
msy
I think a lot of this is more that apple doesn't give a damn about
reuseability, they care about perfection. If the promo after father's day has
an image that goes over the border by 3px, they'll write it from scratch.

~~~
kaelig
They care about perfection on the surface as well as below the surface. This
release doesn't meet both these criteria.

~~~
tptacek
I don't think it's actually true that Apple cares about "perfection below the
surface".

~~~
Hontano
It might not be perfect, because what ever is? But the interior of the Macbook
Pro, Mac Pro, and other hardware suggests otherwise:

[http://www.ifixit.com/Teardown/MacBook+Pro+15-Inch+Retina+Di...](http://www.ifixit.com/Teardown/MacBook+Pro+15-Inch+Retina+Display+Mid+2012+Teardown/9462/1)

Similarly, the filesystem on OS X. As far at the Mac parts go, while the BSD
folders have visibility toggled off.

~~~
rednukleus
Oh give me a break, Apple products are nowhere near perfection. They do plenty
right, but plenty of their stuff is awful (just like every other company out
there). Finder is awful. The calendar and notes app are awful. One of the
ugliest things about Apple is the constant insistence by users that everything
Apple does is perfection.

~~~
Hontano
I didn't say they're perfect or anywhere near perfection. I could go on at
length about the myriad things that annoy me: Finder, HFS, software update
crammed in the App Store, iOS lockdown.

All I did say is that they absolutely do _care_ about what's below the
surface. Parts that a fraction of a fraction of folks will ever see are given
loving attention far beyond the norm. Do most or any other manufacturers color
coordinate battery warning labels, PCBs, etc., down to the cm^2 headphone
jack?

------
mddw
What is wrong is that I can't zoom on your website. Typos won't scale.

It's really a big accessibility problem. I can't read this article without
using the Chrome inspector to change styles.

And I'm far from being visually Impaired.

Sorry, but it must be said.

~~~
kaelig
Thanks very much for this feedback. I removed this limitation and you can now
zoom in. I am very sorry, as this is something I've been willing to fix for a
long time.

~~~
saraid216
> this is something I've been willing to fix for a long time

I'm guessing English isn't your native language, so this is a diction note:

You should say "I've been _wanting_ to fix". "willing" is strictly correct,
but it conveys that you've been waiting for someone to ask you to fix it.
"wanting" conveys that you knew about the problem but hadn't found the time to
deal with it.

Hope that helps.

~~~
asveikau
Nitpick: your explanation works for the far more common term "willing", an
adjective. But, through it may sound awkward and very few people would use it
this way, could it not also be the participle of "to will"? In this
interpretation the use of "willing" is totally correct.

(Also, before saying that I've written this out of some foreign notion of
English and that I just wouldn't understand, my own native language is
English.)

~~~
qu4z-2
It's technically correct, but it sounds weird and non-native to me. It
requires me to jump through mental hoops to explain how it makes sense. For
easy communication, I'd recommend sticking with "wanting" in this situation.

(though I'm not averse to using awkward phrasings or the like in casual
situations where clear communication isn't the number one priority. At the
moment I'm on a crusade to bring back "thrice" and {h,th,wh}{ence,ither}. )

~~~
kaelig
Thanks! I actually moved to the UK exactly one year ago to improve my
speaking/writing English skills, and every suggestion helps. I hesitated when
writing this comment and went for "willing" because it sounded good (not a
very good way to choose what word to use…).

------
currysausage
_> Your code is so much better than most Fortune 500 companies, which is why
hundreds of developers (perhaps more) are viewing the source of Apple.com ..._

Let's hope these hundreds of devs don't look too closely. Referencing 11+
seperate JS files in <head>, among them unminified libraries, isn't exactly
best practice. They violated all the rules:

1) Combine! 1 CSS + 1 JS are usually enough.

2) Move JS to the bottom if possible!

3) Minify!

(I'm talking about www.apple.com, not the store.)

------
rquantz
Everyone is doing _something_ wrong.

I'm starting to wonder about using checklists for deployment (yes, your
deployment should be automated. You still have to go through the checklist at
least once). There are lots of them out there, but they seem pretty pretty
general, mostly. There are also a lot that are internal to a given company,
used for a specific application.

It seems like there should be an intermediate level, though. Just like any OSS
project is expected to have a readme and a changelog, it should also have a
CHECKLIST.txt. Drop it into your checklists directory (or have a script that
collects them for you) when you add a library to your project, and go through
them all before releasing.

------
mechanical_fish
Things that Apple's customers care about include: Whether the website reliably
displays on their device. Whether or not they can successfully browse and buy
Apple's latest products. How fast the site loads.

Things that Apple's customers don't care about at all include: The code. Or
whether or not that code "smells".

This would be an interesting story if it spoke in terms of something
important. "Here is how Apple could probably boost sales by 0.1% by optimizing
their SaSS" would be a good story. "Here is how to make the Apple Store load
25% faster by optimizing its SaSS" would be a good story.

But "here is how Apple could make their SaSS more aesthetically satisfying to
the 0% of visitors who will pay more to read higher-quality code in the Web
Inspector" is, at best, an academic exercise.

Production code exists to solve problems, and its quality is not merely a
function of the code itself, but of the time constraints, the budgetary
constraints, and the magnitude and urgency of the business opportunities. How
many millions of dollars of product did Apple's "bad" SaSS sell in the time it
took to critique it?

~~~
kaelig
I agree that code should not be a goal in itself, but you miss the point.

Apple is preaching engineering excellence through their campaigns and
products. In the Apple World, the quality of a product is not something you
assess only depending on the money it makes.

------
kaelig
Today Apple redesigned the homepage of the online Apple Store. I was having a
look at their code and I found out some interesting code smells that
apparently even the most skilled developers will commit.

If one of their developers is reading this I am happy to help with Sass
architecture and best practices.

~~~
coldtea
> _I was having a look at their code and I found out some interesting code
> smells that apparently even the most skilled developers will commit._

Your use case is not Apple's use case.

They're not designing Flickr, some blogging service or some news site.

The smells are there for a reason. The pages and styles are not to be reusable
-- they are meant to be easily replaceable on a per page / section basis.

~~~
jonknee
> The smells are there for a reason.

What reason is there for CSS that is commented out? Or for redundant prefixes?
Or for debug to be left on and to have a bunch of comments and paths from the
build structure?

~~~
richardwhiuk
>>> Or for debug to be left on and to have a bunch of comments and paths from
the build structure?

So you can debug problems being seen only in the production version?

~~~
jonknee
Let's hope Apple's not that lazy.

------
swalling
We've started experimenting with Sass for Wikipedia as well, and it's now in
MediaWiki core. Check out mediawiki.ui in the core resources
(git.wikimedia.org).

Right now we're only using it for our upcoming signup/login redesign, but it's
available for use elsewhere and will probably start popping up on other
interaces. We debated whether to even include the Sass files and associated
errata at all though, to be honest.

~~~
kaelig
Thank you for sharing, I am glad that more and more organizations are using
such powerful tools.

Also: it's Sass, not SASS.

~~~
swalling
Edited accordingly.

------
seivan
Next time some person says that CSS is good enough and SASS/SCSS is
unnecessary. Yeah this.

~~~
kamjam
Each have their place, and if you can't write good good CSS then your SASS is
going to be just as rubbish.

~~~
manmal
What's good CSS, apart from minimizing performance impact by keeping to some
rules?

~~~
hcatlin
What's good code apart from minimizing performance impact by keeping to some
rules?

------
nwh
I don't think Apple is doing _anything_ right on their website. I've recently
come across parts of it built in 2006 on perl scripts, running hand in hand
with the AppleID code running today. The backend must be horrifying.

------
outside1234
Is this any surprise from the team that takes the store offline to add
products?

~~~
freehunter
That's more marketing and hype than technical limitation.

~~~
kaelig
There actually used to be a technical reason for it. Updating the servers all
over the World required a propagation delay. Nowadays I don't know.

------
danielweber
This article would be improved tremendously if you told me what Sass was.

~~~
kaelig
You're right, since the audience reading the blog is usually a crowd of
developers I did not think I should mention it. Sass is a CSS preprocessor,
used for better stylesheet authoring. You may find more information here:
<http://sass-lang.com/>

I also added a link to the Sass website in the first part of the post.

------
racl101
Seems like everyone wants to make a name for themselves by knocking on others
on HN instead of showing their own awesome work.

