WebElement #4 - Scalable and Modular Architecture for CSS
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WebElement #4 - Scalable and Modular Architecture for CSS

on

  • 1,014 views

http://www.webelement.sk/event/webelement-4

http://www.webelement.sk/event/webelement-4

Statistics

Views

Total Views
1,014
Views on SlideShare
872
Embed Views
142

Actions

Likes
1
Downloads
6
Comments
1

5 Embeds 142

http://webelement.sk 59
http://webelement.loc 44
http://www.webelement.sk 35
http://localhost 3
http://lanyrd.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Thanks, layout example gives nice clarity to the topic
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WebElement #4 - Scalable and Modular Architecture for CSS Presentation Transcript

  • 1. SMACSSScalable and Modular Architecture for CSS Vladimír Kriška (@ujovlado) WebElement #4
  • 2. What is SMACSS● SMACSS was created by Jonathan Snook (@snookca)● Is a Style Guide / set of rules to examine your design process● Web: http://smacss.com/, http://snook.ca/
  • 3. 4 types of CSS rules● Base● Layout● Module● State
  • 4. Base rules ● Base rules says how looks an element, wherever on the page this element is - the default behavior of element ● All other styles inherit from these styles ● They dont include any IDs or classesBase rules may also include default link styles, font sizes,background colors, etc.
  • 5. Base rules - examplebody { background-color: #fff; color: #222;}p, ul, li { padding: 0;}a, a:hover { color: blue;}input[type=text] { font-family: Georgia; background-color: #fff; color: #000;}
  • 6. Layout rules● Divide page into sections● Headers, footers, sidebars, content● Layout should has a single ID or class name
  • 7. Layout rules - example#content { width: 640px; float: left;}#sidebar { width: 320px; float: right;}/* swap sidebar and content - for RTL languages */.right-to-left #content { float: right;}.right-to-left #sidebar { float: left;}
  • 8. Layout example
  • 9. Layout example MENU PANELCONTENT SIDEBAR
  • 10. Modules ● Reusable modular parts of design ● Module is a component of page ● It should be designed as a standalone componentAvoid element selectors - if its possible, use classes. Dontbe ambiguous. Be more specific.Be aware of specificity, when creating submodules.
  • 11. Module example.pagination { border-top: 1px solid #ccc; margin-top: 1em;}.pagination > ul { list-style-type: none;}.pagination > ul > li { display: block; float: left;}
  • 12. State rules ● State rules describe how modules and layout look when they are in some state ● State is something that override all stylesStates should be made to stand alone. Dont use !important until you truly need it and remember thatonly states should have it.
  • 13. State rules - example.pagination > li.active{ background-color: blue; color: white;}.accordion .collapsed { display: none;}.something .is-selected { font-weight: bold;}
  • 14. Tips● Minimize the depth / number of generations● Dependency on HTML structure - components cant be moved easily● Care about selector performance● Format the code (No, Im not kiddin)● Organize your CSS
  • 15. Demo
  • 16. Thank you!Vladimír Kriška (@ujovlado)