Smacss

876 views
756 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
876
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • How do we scale?
  • How do we scale? Modularize our code.
  • One way to modularize is to categorize.Group different functions or styles together.
  • Server-side languages have this,CSS lacks this.This helps new developers coming onto a project to understand what is going on.
  • These set up the defaults. No use of !importantLibrary: Could use CSS reset files here like Normalize.css
  • Layouts are major components, while modules are minor components.Layouts could be Headers, Footers, etc.Library: Could use CSS grids here like 960 Grid, Blueprint, or Bootstrap
  • Modiules – CNN.com example
  • Bad ExampleToo many assumptions made. - An ID is used, which assumes only one will ever exist on a page - Tag selectors are used in the CSS, it can only ever exist as a <div> with a <ul> inside it - Items have a specific height and width set on themGood Example - Use classes to describe things -
  • It starts out simple…
  • New requirement! Show the item count in the folders.Problem.
  • Using properly named classes will prevent you from needing to do major refactors
  • Smacss

    1. 1. SMACSS
    2. 2. Scalable to…• Large projects• Large teams• Multiple projects
    3. 3. ModularUse concepts to simplify CSSand rethink how we code
    4. 4. CategorizationThinking about the role that apiece of code plays
    5. 5. Naming ConventionClarifying the intent via aconsistent clear selector name.#navigation ul li span{ .nav-arrow{ background-image: url(‘arrow.png’); background-image: url(‘arrow.png’); color: #CCC; padding-left: 16px; padding-left: 16px; }} .muted-text{ color: #CCC; }
    6. 6. Scaling CSS for large applications Theme State Module Layout Base
    7. 7. Basehtml, a{body{ Or, use a pre-made one! #039; color: http://necolas.github.com/normalize.css/ margin: 0; } padding: 0; a:hover{} color: #03F;input[type=text]{ } border: 1px solid #999;}
    8. 8. Layoutbody{ #sidebar, width: 960px; #content{ margin: 0 auto; float: left;} Or, usepadding: 10px; a pre-made one! http://960.gs/#sidebar{ } http://blueprintcss.org/ width: 160px; #footer{ http://twitter.github.com/bootstrap/} clear: both;#content{ } width: 760px;}
    9. 9. Header Module Primary Navigation Secondary Navigation Tertiary Primary/Featured Content ContentSecondary Content
    10. 10. Feature Feature Feature FeatureFeature Feature List
    11. 11. Modules• <span> and <div> are container that have no meaning.• <img>, <p>, <header>, <footer> have some semantic meaning• A well named CSS class has even more meaning
    12. 12. Modules<div class="folder"> .folder > span{ <span>My Folder</span> padding-left: 20px;</div> background: url(icon.png);<div class="folder"> } <span>Another Folder</span></div>
    13. 13. Modules<div class="folder"> .folder > span{ <span>My Folder</span> padding-left: 20px; <span>(31 items)</span> background: url(icon.png);</div> }<div class="folder"> <span>Another Folder</span> <span>(17 items)</span></div>
    14. 14. Modules<div class="folder"> .folder-name{ <span class="folder-name">My Folder</span> padding-left: 20px; <span class="folder-items">(31 items)</span> background: url(icon.png);</div><div class="folder"> } <span class="folder-name">Another Folder</span> .folder-items{ <span class="folder-items">(17 items)</span> color: #999;</div> }
    15. 15. Modules•Be Specific•Be Meaningful
    16. 16. Resources• Smacss.com• AppRiver Library Book (at my desk)

    ×