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.
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
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.
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>