WebElement #4 - Scalable and Modular Architecture for CSS

  • 628 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks, layout example gives nice clarity to the topic
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
628
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
6
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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)