html tour - buenas prácticas en el desarrollo web
Post on 13-Jun-2015
2.927 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related