Developing Large Web Applications- P8

Developing Large Web Applications- P8:This book presents a number of techniques for applying established practices of goodsoftware engineering to web development—that is, development primarily using thedisparate technologies of HTML, CSS, JavaScript, and server-side scripting languages.Whereas there are many books on how to use languages, how to use libraries, and howto approach software engineering, this is the first book to codify many of the techniquesit presents. These techniques will make the components of your own web applicationsmore reusable, maintainable, and reliable....
Nội dung trích xuất từ tài liệu:
Developing Large Web Applications- P8 CHAPTER 4 Large-Scale CSSIn Chapter 3, you saw how a good information architecture based on well-constructedHTML provides a solid foundation on which we can layer other capabilities for moduleswithin a large web application. In this chapter, we explore techniques for adding a layerof presentation.The purpose of the presentation layer is to enhance usability and provide an aestheticuser experience by applying principles of good visual design. At its best, a good pre-sentation plays a principal role in making a large web application more usable andappealing. At its worst, a poorly executed presentation can render an otherwise usefuland meaningful information architecture completely worthless.In web development, a well-defined presentation layer is implemented using CSS. This,in fact, was the original purpose of CSS when it first came on the scene in the late 1990s:it allowed for clear separation of a web application’s underlying information architec-ture from its presentation. However, this separation hasn’t necessarily guaranteedmodularity. Our goal in developing large web applications is defined in the CSS-relatedtenet from Chapter 1: Tenet 4: Large-scale CSS forms a layer of presentation that is separate from the infor- mation architecture, applied in a modular fashion, and free of side effects as we reuse modules in various contexts.In this chapter, we begin by looking at the tradeoffs between the various ways to includeCSS. We explore important techniques with selectors, standard module formats, andCSS scoping that help you apply CSS in a modular way. Next, we view some usefulmethods by which we can position elements outside the normal document flow. Theseare especially important in the creation of layouts and containers, which are reusableenclosures that allow you to organize modules across a large web application. Finally,we examine a few examples of layouts and containers, and discuss some practices toprovide a clean, consistent slate on which to layer a presentation. 51Modular CSSOnce you have divided the components of a web page into reusable modules that reflectthe information architecture (see Chapter 3), you can focus on how to give the modulesthe desired presentation through CSS. As mentioned earlier in Tenet 4, the CSS should: • Have distinct modules of its own that apply to specific parts of the architecture (in other words, it should be well targeted), and • Not produce unexpected consequences as a module is reused in various contexts (in other words, it should be free of side effects).In practice, you may need to alter your information architecture slightly over time toaccommodate highly stylized presentations. But even when making such adaptations,always try to maintain a meaningful HTML structure upon which you can layer mod-ular CSS.Including CSSLet’s look at three ways to include CSS in a web application: linking, embedding, orinlining. Although linking is generally the most desirable of these options, it is commonto find some combination of these methods in use across a large web application, evenwithin a single page, since each method has some benefits, depending on the specificsituation.LinkingLinking allows you to place CSS in a file, which you then apply by placing a link tagin an HTML file. This has desirable effects: architecturally, multiple pages can sharethe same CSS, while in terms of performance, the browser can cache the file afterdownloading it the first time. The following example links a CSS file: Linking also allows you to specify a media type so that you can direct certain CSS rulesat specific media (e.g., screens, printers, etc.). For example, when displaying a file forprinting, you can remove nonessential items that would consume a lot of printer ink.To achieve this flexibility, specify media=all as an attribute for the main stylesheets,then conceal certain parts of the page during printing by including specific styles forthis purpose in a second stylesheet with the attribute media=print. For example: 52 | Chapter 4: Large-Scale CSSOnce you modify a file that browsers may have already cached, you need to make surebrowsers know when to bust the cache and download the new copy. Version numbershelp you manage this. Incorporating a date stamp into the CSS file’s name works well,and you can add a sequence number when updating the CSS file more than once a day(or you could use the version number from your source control system instead of thedate stamp). For each new copy, simply bump up the version number as shown here: Of course, each page that includes a link ...