systematic-css

Recommendations

Info

Dynamic classesClasses are often used as targets for DOM queries:document.querySelectorAll( '.popup' );But now we've got fancy new custom data-* attributes for that. And we should use them:document.querySelectorAll( '[data-popup="true"]' );Using data-* attributes – and elements, too – as the exclusive interface between HTMLand JavaScript leaves class attributes as the primary interface between HTML and CSS. This isa convenient dichotomy, and it is one less concern for classes.However it is perfectly fine for modifier classes to be dynamically injected into a documentby a client-side JavaScript program. Dynamic modifiers adopt the "is-" prefix, so we cantell they were put there after the initial page was rendered in the browser. Temporary classesused to transition something from one state to another are named "is-" followed by a verb.Permanent classes that fix the state of something are named "is-" followed by an adjective..is-opening {}.is-open {}.is-closing {}.is-closed {}If a dynamic class belongs to a particular widget, it should be be further prefixed with thename of that widget, written lower case. The purpose is to help us see in the markup whichmodifiers belong to which components. In the following example there are three modifiersthat belong to the Slideshow widget: "slideshow-is-animating", "slideshow-is-showing"and "slideshow-is-hidden". There's another modifier here, "clearfix", but even though it isnested inside the markup for the Slideshow widget we know that it is actually a global modifierthat could be used elsewhere in the wider document, too.Class names 31
Classes added to a document for the purpose of feature detection should be prefixed with"supports-"..supports-<strong>css</strong>boxsizing {}.supports-<strong>css</strong>transforms3d {}.supports-webworkers {}The popular Modernizr library can be configured to add a custom prefix to theclasses that it injects into documents. Use the "className prefix" option whenyou download the library from here: http://modernizr.com/download/Class name semanticsChoosing names for things is not easy. In fact it is one of the hardest parts of scalable webdesign. Names should last the lifetime of the objects to which they are given. So we shouldchoose names that describe things that are unlikely to change. The trick is to pick names thatare a little bit abstract, that do not precisely describe the content that they encapsulate, or thefunctionality that they represent, or the presentation that they apply, because these things areinclined to change over time.Consider the following example. It's the markup for a widget that presents a scrollingmarquee of breaking news headlines.Headline #1Headline #2Headline #3Headline #4Headline #5Class names 32
Page 1 and 2: SystematicCSSKieran Potts
Page 3 and 4: Contents1 Introduction6 The princip
Page 5 and 6: There is hope. The Shadow DOM - par
Page 7 and 8: Web design methodologies benefit al
Page 9 and 10: The principlesof good CSSAll web de
Page 11 and 12: vary from project to project. But o
Page 13 and 14: to figure out exactly what things t
Page 15 and 16: Defensive programmingIn many of the
Page 17 and 18: Now, in a large project it is entir
Page 19 and 20: Single responsibility principleIt i
Page 21 and 22: }color: hsl(0, 0%, 100%);*.shout {f
Page 23 and 24: And that's very handy. Once a class
Page 25 and 26: Take CSS. The easiest, most practic
Page 27 and 28: of the default presentation of HTML
Page 29 and 30: Class namesIn the Systematic CSS we
Page 31 and 32: We can work out from their names an
Page 33: (which renders a navigation menu).
Page 37 and 38: LayoutThe first stage of a new web
Page 39 and 40: --display--float--position--top, bo
Page 41 and 42: Usage:Modifiers are explained in gr
Page 43 and 44: ElementsThe next stage is to set th
Page 45 and 46: @media screen and (min-width: 37.5r
Page 47 and 48: WidgetsHTML's extensive suite of na
Page 49 and 50: HomeAboutLearnExtendShareSearchSear
Page 51 and 52: January 2015NextMonTueWedThuFriSatS
Page 53 and 54: Modifiers can also be used to targe
Page 55 and 56: Lorem ipsum dolor sit amet...10 Jan
Page 57 and 58: ModifiersWhen something needs to be
Page 59 and 60: Element modifiersHTML's native elem
Page 61 and 62: Modifiers can also target specific
Page 63 and 64: Now there is much less risk that th
Page 65 and 66: Dynamic modifiers - any class that
Page 67 and 68: In large projects I will have one s
Page 69 and 70: ReferencesAtomic Designhttp://bradf
Page 71: Object-Oriented CSS Frameworkhttp:/

systematic-css

Create successful ePaper yourself

Delete template?

Save as template?