BPScott

Investigating CSS Classname minification

I saw a twitter conversation today making reference to performance savings based on minifying classnames, like what Google's GWT does.

I reckoned that the number of bytes saved would be negligble and thus this technique is not worth the hassle of implementing.

I should probably put that claim to the test...

BPScott

// ----
// libsass (v3.1.0)
// ----

$some-list: (item1, item2, item3);

@mixin someMixin($first, $second, $third) {
 .mixin-variables-proving-the-mix-ca{
   content: '#{$first}, #{second} #{third}';
 }

BPScott

// ----
// libsass (v3.1.0)
// ----

$some-list: (item1, item2, item3);

@mixin someMixin($first, $second, $third) {
  /* Should have  content: 'item1, item2, item3'; */ 
  .prove-the-mixin-can-access-its-args{
   content: '#{$first}, #{$second} #{$third}';

BPScott

// ----
// libsass (v3.2.5)
// ----

// An example of adding named ranges support to Sass-mq

@import "mq";

// These are the mq defaults but, we'll add them here
// so you can easily see what is going on

BPScott

// ----
// libsass (v3.2.5)
// ----

// An example of adding named aliases support to Sass-mq.

// Sass-mq is great for building out a single media query declaration. Much of 
// the time though you don't use a declaration just once, you use it throughout
// your Sass codebase. Writing out potentially complex declarations multiple
// times may lead to mistakes, and if you need to change the query then you have

BPScott

// ----
// libsass (v3.2.5)
// ----

// Sass is really dumb about creating literal backslashes, such as when
// creating codepoints for icon fonts.
// This works in LibSass 3.2 and Ruby Sass 3.4

@mixin icon-content($codepoint) {
  content: #{"\"\\"}#{$codepoint + "\""};

BPScott

// ----
// libsass (v3.2.5)
// ----

// Sass is really dumb about creating literal backslashes, such as when
// creating codepoints for icon fonts.
// This works in LibSass 3.2 and Ruby Sass 3.4
// Shamelessly pilfered from https://github.com/sass/sass/issues/659#issuecomment-71759457

@mixin icon-content($codepoint) {

BPScott

// ----
// libsass (v3.2.5)
// ----

$items: (
  small: 320,
  medium: 600,
  large: 1008
);

BPScott

<p class="2/3">Fooo</p>

BPScott

Keybase proof

I hereby claim:

• I am BPScott on github.
• I am bpscott (https://keybase.io/bpscott) on keybase.
• I have a public key whose fingerprint is 315A 1382 DBB5 8F3D C205 E034 CA4A DCB3 3039 D809

To claim this, I am signing this object: