Buenas prácticas en el desarrollo web

Speakers

Alfredo Fernándezafernandez@plainconcepts.com@afernandez_l

David Garciadgarcia@plainconcepts.com@jotadeg

CSS best practices

Usar un reset.css

<link> vs @import

CSS Sprites

CSS best practices

Usar abreviaciones

CSS best practices

Combinar selectores

CSS best practices

Selectores, de derecha a izquierda

CSS best practices

Entendiendo la prioridad de los estilos en CSS: Specificity Inheritance and the Cascade

Specificity

#sidebar ul li a.myclass:hover {}

inline IDs classes elements

& pseudo elements& pseudo classes& attributes

21 30

Inheritance

Los elementos heredan de su contenedor padre

No todas las propiedades son heredablesPero se puede declarar explicitamente que una propiedad herede los estilos de su padre

Y ahora?

LESS extends CSS with dynamic behavior

Menos código

Más rápido de escribir

Más fácil de mantener

Más reusable

OOCSS

What’s a CSS Object?

Basically, a CSS “object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. Once created, an object can then be reused throughout a site.

OOCSS

Separate structure and skin

Identifica los patrones visuales y crea ‘skins’

OOCSS

Separate container and content

Un objeto debe verse igual sin importar dóndeeste colocado

OOCSS

Evita los selectores de descendencia -> .sidebar h3 {}

Evita los IDs en los selectores

Evita agregar clases a los elementos -> h1.category {}

En la mayoria de casos, evita el uso de !important

Usa CSS Lint para analizar tus estilos

Referencias

http://necolas.github.com/normalize.css/http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/http://csswizardry.com/2011/09/writing-efficient-css-selectors/http://developer.yahoo.com/performance/rules.htmlhttp://lesscss.org/http://lesshat.com/http://lesselements.com/http://clearleft.github.com/clearless/https://github.com/stubbornella/oocss/wiki

En javascript también!

Javascript the good parts

JSLint

JSHint

JSHint en Visual Studio

Web essentials

Testing javascript

También se puede

Testing javascript

También se puede

También se debe!

Testing javascript

JasmineJSUnitMocha…

Jasmine en Visual Studio

Chutzpah

Minify and bundle

Asp.net MVC4 Minify’s and bundlesChirpy…

Javascript: the worst part

Nuestra ignorancia

References

JSHint http://www.jshint.com/Web essentials http://visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6Chutzpa test runner http://visualstudiogallery.msdn.microsoft.com/71a4e9bd-f660-448f-bd92-f5a65d39b7f0Chutzpa test adapter http://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1feJasmine http://pivotal.github.com/jasmine/Chirpy http://chirpy.codeplex.com/http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Gracias!

Alfredo Fernándezafernandez@plainconcepts.com@afernandez_l

Gerard López glopez@plainconcepts.com@gerard_lopz