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="red­container"></div><div id="green­container"></div><div id="blue­container"></div>

div margin: 10px; padding: 10px;#red­container background: red;#green­container background: green;#blue­container 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.