Date post: | 14-Aug-2015 |
Category: |
Education |
Upload: | vladimir-zhidal |
View: | 69 times |
Download: | 2 times |
CSS IN ITERATIONSCreated by Vladimir Zhydal
LEVEL 1“Html/Css are for html coders only”
INLINE STYLES<div style="background: red; margin: 10px; padding: 10px;"></div><div style="background: green; margin: 10px; padding: 10px;"></div><div style="background: blue; margin: 10px; padding: 10px;"></div>
RESULTSAlmost impossible to maintain.Almost impossible to make themes.Widespread duplication of code.
IMPULSEI can avoid duplication.
<STYLE><style>
</style><div style="background: red;"></div><div style="background: green;"></div><div style="background: blue;"></div>
div margin: 10px; padding: 10px;
RESULTSThere is no so many copy-paste.Super hard to maintain.Super hard to make themes.
IMPULSEI can separate content and styles.
LEVEL UP
LEVEL 2“Let’s see how html coders do that”
FIRST STEPS OF SEPARATIONLet’s use separate files for styles and html.Let’s use ids (just because they are fast).
<LINK>
<link href="index.html" rel="stylesheet"<div id="redcontainer"></div><div id="greencontainer"></div><div id="bluecontainer"></div>
div margin: 10px; padding: 10px;#redcontainer background: red;#greencontainer background: green;#bluecontainer background: blue;
RESULTSPossible to make themes.Still hard to maintain.High coupling.A lot of side effects.
IMPULSEId => class (because ids cannot be reused through thehtml code).Think about structure.Think about semantics in naming.
COMMENTS FOR DEFININGSTRUCTURE
.container margin: 10px; padding: 10px;/****** HEADER *******/.header background: red;/****** END HEADER *******/
/****** BODY *******/.content background: red;/****** END BODY *******/
RESULTSA bit easier to maintain (just because it’s easier to findsome logical parts).There is a big chance to place a style to a wrong group.
IMPULSEPlace logical parts of your styles in separate files.Performance optimizations shouldn't affect projectstructure.It’s possible to use build tools instead of developing inone file.
DEEP NESTING(CSS COUPLED TO DOM)
.container div color: red;.container div .container ul color: green;.container div .container ul li a span color: blue;
RESULTSHard to maintain.Hard to read and modify.Hard to override.
ONE LINE STYLES.container div color: red;.container div .container ul color: green;.container div .container ul li a span color: blue;
RESULTSBig problems with VCS.Hard to maintain.Super hard to read and modify.Hard to override.
IMPULSEI can make my project more structured and maintainablewith some modules.Naming and semantic are really important.
LEVEL UP
LEVEL 3“I’m not an html coder, but I’m a programmer. I can do
better!”
THINK ABOUT SCALABLE ANDMODULAR CSS
Scalable and Modular Architecture for CSSObject Oriented CSSDon’t Repeat Yourself CSSBlock, Element, Modifier
THINK IN MODULESAfter getting a mockup try to split it to modules.Make it possible to reuse your modules.Write container independent CSS.Use strong naming conventions.