(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{629:function(t,e,s){"use strict";s.r(e);var a=s(56),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("ul",[s("li",[s("a",{attrs:{href:"#how-to-handle-css-in-larger-pages"}},[t._v("How to handle CSS in larger pages")]),t._v(" "),s("ul",[s("li",[s("a",{attrs:{href:"#in-this-video-tldr"}},[t._v("In this video... (TL;DR)")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#code-at-the-start-of-this-lecture"}},[t._v("Code at the start of this lecture")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#code-written-in-this-lecture"}},[t._v("Code written in this lecture")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#final-code-at-the-end-of-this-lecture"}},[t._v("Final code at the end of this lecture")])])])])]),t._v(" "),s("h1",{attrs:{id:"how-to-handle-css-in-larger-pages"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-to-handle-css-in-larger-pages"}},[t._v("#")]),t._v(" How to handle CSS in larger pages")]),t._v(" "),s("h2",{attrs:{id:"in-this-video-tl-dr"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#in-this-video-tl-dr"}},[t._v("#")]),t._v(" In this video... (TL;DR)")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("TIP")]),t._v(" "),s("p",[t._v("List of all code changes made in this lecture: "),s("a",{attrs:{href:"https://diff-store.com/diff/section09__07_handle_css_larger_pages",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://diff-store.com/diff/section09__07_handle_css_larger_pages"),s("OutboundLink")],1)])]),t._v(" "),s("p",[t._v("Using BEM and an external stylesheet (or more than one) is still the best way to go, for example by giving out "),s("code",[t._v("todo.html")]),t._v(" paragraphs classes:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("{% if completed %}\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("todo todo--completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("You've completed this todo! 🚀"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {% else %}\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("todo todo--pending"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("You haven't completed this yet. Why not do it now?"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {% endif %}\n")])])]),s("p",[t._v("However, in some pages that are self-contained and don't have elements which will be reused in other pages, it can be OK to have some inlined styles.")]),t._v(" "),s("p",[t._v("I would keep inline styles here for "),s("code",[t._v("not-found.html")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("{% block head %}\n  "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token style"}},[s("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n    "),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".notfound")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" gray"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 125%"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  ")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("style")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n{% endblock %}\n")])])]),s("h2",{attrs:{id:"code-at-the-start-of-this-lecture"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#code-at-the-start-of-this-lecture"}},[t._v("#")]),t._v(" Code at the start of this lecture")]),t._v(" "),s("p",[t._v("Available at "),s("code",[t._v("start")]),t._v(". The same as last lecture's "),s("code",[t._v("end")]),t._v(" code.")]),t._v(" "),s("h2",{attrs:{id:"code-written-in-this-lecture"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#code-written-in-this-lecture"}},[t._v("#")]),t._v(" Code written in this lecture")]),t._v(" "),s("p",[t._v("The decision to go with inline styles vs. separate stylesheets is very much one of maintainability and reusability.")]),t._v(" "),s("p",[t._v("If you think the styles you create in a stylesheet will be used in multiple places, and they're getting longer or more complex, then it's worth separating them into their own stylesheet.")]),t._v(" "),s("p",[t._v("When the styles are simple or they're only used in one place, then keeping them inline can be acceptable.")]),t._v(" "),s("p",[t._v("It very much comes down to personal preference!")]),t._v(" "),s("p",[t._v("I'll start with giving my elements classes following the BEM convention. The block will be called "),s("code",[t._v("todo")]),t._v(" and it will have a modifier, either "),s("code",[t._v("--completed")]),t._v(" or "),s("code",[t._v("--pending")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[t._v("{% if completed %}\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("todo todo--completed"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("You've completed this todo! 🚀"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {% else %}\n    "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("todo todo--pending"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("You haven't completed this yet. Why not do it now?"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  {% endif %}\n")])])]),s("p",[t._v("Then we can go to "),s("code",[t._v("base.html")]),t._v(" and link a stylesheet that will be used in all templates:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/static/css/style.css"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n")])])]),s("p",[t._v("We can then create the "),s("code",[t._v("static")]),t._v(" top-level folder, and a "),s("code",[t._v("css")]),t._v(" folder inside it, and "),s("code",[t._v("style.css")]),t._v(" inside that.")]),t._v(" "),s("p",[t._v("We'll give the "),s("code",[t._v(".todo")]),t._v(" block all the shared styles between the completed and pending todos:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".todo")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 8px 16px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("padding")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 12px 24px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 1px solid black"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("border-radius")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 4px"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Then we can define the modifiers below it, only changing those properties that differ:")]),t._v(" "),s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".todo--completed")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" aquamarine"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".todo--pending")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("background-color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" darkred"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" white"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("That's everything, but remember you can always go into "),s("code",[t._v("not-found.html")]),t._v(" and do something similar.")]),t._v(" "),s("p",[t._v("We could remove the inline style, and add it to the CSS file.")]),t._v(" "),s("p",[t._v("There's also one more thing that can be a factor when deciding to go with inline vs. stylesheet: caching.")]),t._v(" "),s("p",[t._v("If your HTML document has a lot of inline styles, then it'll be a bigger size. When users request it, they'll have to download the code in order to run it. If the code is bigger, it'll take them longer to download.")]),t._v(" "),s("p",[t._v("This is also true for the CSS stylesheet. If you have all your styles in a single sheet, it'll be bigger and take longer to download.")]),t._v(" "),s("p",[t._v("However, once the stylesheet has been downloaded, browsers will cache it so that on subsequent requests it won't be downloaded again. This can speed up your website.")]),t._v(" "),s("p",[t._v("So all in all:")]),t._v(" "),s("p",[t._v("If your inline style is used in one place, is simple, and is small in size (simplicity and size will usually go hand in hand), then that's OK.")]),t._v(" "),s("p",[t._v("For anything else, use the stylesheets.")]),t._v(" "),s("p",[t._v("And before you ask, it's OK to have multiple separate stylesheets--such as "),s("code",[t._v("style.css")]),t._v(", "),s("code",[t._v("menu.css")]),t._v(", and "),s("code",[t._v("typography.css")]),t._v(". It'll take a bit longer to load initially, but when they're cached the page load times will be identical to having them all in one page.")]),t._v(" "),s("h2",{attrs:{id:"final-code-at-the-end-of-this-lecture"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#final-code-at-the-end-of-this-lecture"}},[t._v("#")]),t._v(" Final code at the end of this lecture")]),t._v(" "),s("p",[t._v("Available at the "),s("code",[t._v("end")]),t._v(" folder. For the sake of example we're keeping inline styles in "),s("code",[t._v("not-found.html")]),t._v(", and using the stylesheet in "),s("code",[t._v("todo.html")]),t._v(".")])])}),[],!1,null,null,null);e.default=n.exports}}]);