HTML Tour - Buenas prácticas en el desarrollo web
•Download as PPTX, PDF•
2 likes•681 views
This document discusses best practices for web development. It covers CSS best practices like using reset.css, link vs import, and CSS sprites. It then discusses CSS specificity, inheritance, and cascading. It also discusses LESS, OOCSS design patterns, and testing and minifying JavaScript.
Recommended
More Related Content
Viewers also liked
Viewers also liked (14)
Similar to HTML Tour - Buenas prácticas en el desarrollo web
Similar to HTML Tour - Buenas prácticas en el desarrollo web (20)
More from Plain Concepts
More from Plain Concepts (20)
Recently uploaded
Recently uploaded (20)
HTML Tour - Buenas prácticas en el desarrollo web
- 1. Buenas prácticas en el desarrollo web
- 2. Speakers Alfredo Fernández David Garcia afernandez@plainconcepts.c dgarcia@plainconcepts.com om @jotadeg @afernandez_l
- 4. CSS best practices Usar un reset.css <link> vs @import CSS Sprites
- 8. CSS best practices Entendiendo la prioridad de los estilos en CSS: Specificity Inheritance and the Cascade
- 9. Specificity #sidebar ul li a.myclass:hover {} 0 1 2 3
- 10. Inheritance Los elementos heredan de su contenedor padre No todas las propiedades son heredables Pero se puede declarar explicitamente que una propiedad herede los estilos de su padre
- 11. Y ahora?
- 12. LESS extends CSS with dynamic behavior
- 14. 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.
- 15. OOCSS
- 16. OOCSS Un objeto debe verse igual sin importar dónde este colocado
- 17. OOCSS
- 18. 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.html http://lesscss.org/ http://lesshat.com/ http://lesselements.com/ http://clearleft.github.com/clearless/ https://github.com/stubbornella/oocss/wiki
- 20. Javascript the good parts
- 21. JSLint
- 22. JSHint
- 23. JSHint en Visual Studio
- 27. Jasmine en Visual Studio
- 29. Javascript: the worst part
- 30. References JSHint http://www.jshint.com/ Web essentials http://visualstudiogallery.msdn.microsoft.co Chutzpa test runner http://visualstudiogallery.msdn.microso Chutzpa test adapter http://visualstudiogallery.msdn.micros http://pivotal.github.com/jasmine/ Chirpy http://chirpy.codeplex.com/ http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-min
- 31. Gracias! Alfredo Fernández Gerard López afernandez@plainconcepts.c glopez@plainconcepts.com om @gerard_lopz @afernandez_l
Editor's Notes
- Los CSS también son importantes,- usaunanomenclaturadefinida- estructuratusficheros- manténlascosasorganizadas
- Put Scripts at the BottomThe problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specificationsuggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.In some situations it's not easy to move scripts to the bottom. If, for example, the script usesdocument.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
- Abreviaturas
- Keeping CSS selectors short helps with a lot of things:Increases selector efficiencyReduces location dependencyIncreases portabilityReduces chances of selector breakageDecreases specificityCan make code more forgiving
- Element, Pseudo Element: d = 1 Class, Pseudo class, Attribute: c = 1Id: b = 1 –> (0,1,0,0)Inline Style: a = 1
- Element, Pseudo Element: d = 1 Class, Pseudo class, Attribute: c = 1Id: b = 1 –> (0,1,0,0)Inline Style: a = 1
- Origin refers to the source of the declaration (author styles, user styles, browser defaults) and weight refers to the importance of the declaration. (author has more weight than user which has more weight than default. !importance has more weight than normal declarations)
- Herramienta de pre-procesado.LESS ElementsLESS HatClearlessTwitterBootstrap
- Herramienta de pre-procesado
- Most every design is going to have repeatable visual elements. It may be consistent background colors or border styles that elements share or it may be something else, but the patterns will be present.
- Essentially, this means “rarely use location-dependent styles”. An object should look the same no matter where you put it. So instead of styling a specific <h2> with .myObject h2 {...}, create and apply a class that describes the <h2> in question, like<h2 class="category">.This gives you the assurance that: (1) all unclassed <h2>s will look the same; (2) all elements with the category class (called a mixin) will look the same; and 3) you won’t need to create an override style for the case when you actually do want .myObject h2 to look like the normal <h2>