Our Geek Space

80% of the end-user response time is spent on the front-end. (YSlow Team)

By following these best practices we can have a great impact over the performance of our sites and applications.

In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.

In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.

Sass is used for generating css files based on his own syntax, it’s very useful because allows you to avoid repeating code across the different scss files using import (allows you to import code from other scss file), or mixins(scss functions). Also, allows you to write varibles, for using in different scss, this makes easier to do different templates based on colors or images for example.

_sprites.scss

@mixin sprite_for($image_class, $x, $y, $image: "/images/sprite_image.png") {
  .sprite_image.#{$image_class} {
    background: transparent url($image) no-repeat scroll $x $y;
    height:16px;
    width:16px;
  }
}
_images.scss

$my_sprite_image_path: "/images/my_sprite_image_path.png";

default.scss

@import "sprites", "images";

@include sprite_for("my_image", 0, 0, $my_sprite_image_path);

That generates

default.css

  .sprite_image.my_image {
    background: transparent url(/images/my_sprite_image_path.png) no-repeat scroll 0 0;
    height:16px;
    width:16px;
  }

So, this is best sorted using this method, because you have the image path in a single file and you use it in other files only by importing the file with the images path, it’s also simpler to remove an image because you only need to find the references to that variable and delete them.

The sass framework also allows you to use the DRY principle because you can write nested selector, I’ll show you with an example:

default.scss

.some_class {
  width: 100px;
  .some_other_class {
    display: block;
  }
}

default.css

.some_class {width:100px;}
.some_class .some_other_class {display:block;}

Doesn’t affect the performance because it generates a css file at development time.

It also allows you to benefit from some of the advantages of css 3 right now.