share the thinking in SMACC how to strike a balance between maintenance, performance, and readability.

1. S M A C S S
設計之道
Anderson
2017.06.01

3. CSS is simple.
really?

4. What’s the problem?
p {color: red; }

5. Work with CSS..

6. Structure Naming Testing
So, what makes for good CSS?
Specificity

7. Scalable and Modular
Architecture for CSS
1. Style guide, not framework
2. Strike a balance between maintenance,
performance, and readability
3. Easier to test, develop, and scale
SMACSS

8. Categorizing CSS Rules
Base Layout Module State Theme

10. Rules
* Base
* Layout
* Module
* State
* Theme

11. Base
* Single elements
* Attribute selectors, pseudo-class..
* No need to use !important
* CSS Resets
html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

12. Layout
* Divide the page into sections
* One or more modules together
* Major layout use ID selectors, but ID selectors aren’t
necessary
* Minor or common layout use class selectors
#header, #article, #footer {
width: 960px;
margin: auto;
}
#article {
border: solid #CCC;
border-width: 1px 0 0;
}

13. Higher Level Layout Style
Affecting Other Layout Styles
#article {
float: left;
}
#sidebar {
float: right;
}
.l-flipped #article {
float: right;
}
.l-flipped #sidebar {
float: left;
}

14. Using Two Layout Styles Together
to Switch from Fruid to Fixed Layout
#article {
width: 80%;
float: left;
}
#sidebar {
width: 20%;
float: right;
}
.l-fixed #article {
width: 600px;
}
.l-fixed #sidebar {
width: 200px;
}

15. Module* Reusable, modular parts

16. A Possible Approach to Styling the
List of Featured Items
div#featured ul {
margin: 0;
padding: 0;
list-style-type: none;
}
div#featured li {
float: left;
height: 100px;
margin-left: 10px;
}
.l-grid {
margin: 0;
padding: 0;
list-style-type: none;
}
.l-grid > li {
display: inline-block;
margin: 0 0 10px 10px;
}
What’s the difference ?

17. Module rules
* a standalone component
* e.g navigation bars, carousels, dialogs..
* Avoid using IDs and element selectors, use class
names only
* Specificity
.module > h2 {
padding: 5px;
}
.module span {
padding: 5px;
}
[Notice] : Use child or descendant selectors if predictable

18. Styling with Generic Element
<div class="fld">
<span>Folder Name</span>
</div>
.fld > span {
padding-left: 20px;
background: url(icon.png);
}

19. Styling with Generic Element
<div class="fld">
<span>Folder Name</span>
<span>(32 items)</span>
</div>
.fld > span {
padding-left: 20px;
background: url(icon.png);
}

20. Styling with Generic Element
<div class="fld">
<span class="fld-name">Folder Name</span>
<span class="fld-items">(32 items)</span>
</div>
* Increased the semantics
* Removed any ambiguity

21. Subclassing Modules
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%;
}
#sidebar .pod input[type=text] {
width: 100%;
}

22. Battling against Specificity
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%;
}
#sidebar .pod input[type=text] {
width: 100%;
}
.pod-callout {
width: 200px;
}
#sidebar .pod-callout input[type=text],
.pod-callout input[type=text] {
width: 180px;
}

23. Battling against Specificity
.pod {
width: 100%;
}
.pod input[type=text] {
width: 50%;
}
.pod-constrained input[type=text] {
width: 100%;
}
.pod-callout {
width: 200px;
}
.pod-callout input[type=text] {
width: 180px;
}

24. Sub-module Class Name in HTML
<div class="pod pod-constrained">...</div>
<div class="pod pod-callout">...</div>
* Load base first, then overwriting by sub-class

25. State
* JavaScript dependency
* Apply to layout and/or module styles
* How our modules or layouts will look
when in a particular state
* Use of !important is allowed

26. State applied to an element
<div id="header" class="is-collapsed">
<form>
<div class="msg is-error">
There is an error!
</div>
<label
for="searchbox"
class="is-hidden">
Search
</label>
<input type="search" id="searchbox">
</form>
</div>

27. Combining State Rules
with Modules
.tab {
background-color: purple;
color: white;
}
.is-tab-active {
background-color: white;
color: black;
}

28. Theme
* Aren’t used as often
* Fonts
* Based on locale such as
country or language
/* in theme.css */
.theme-border {
border-color: purple;
}
.theme-background {
background: linear-gradient( ... );
}

29. State changes
* Class name
* Change happens with
JavaScript
* Pseudo-class:
* Don't use by javascript,
limited in elements that are
descendants or siblings of the
element
* Media query

30. JavaScript changing state
via class name
$('.btn-close').click(function(){
$(this).parents('.dialog').addClass('is-
hidden');
})

31. Loading Menu with jQuery
$('#btn-new').click(function(){
var el = $(this);
el.addClass('is-pressed');
$('#menu-' +
el.id.substr(4)).removeClass('is-hidden');
});

32. Adding a Class to Parent Element
to Style Child Elements
<div id="content">
<div class="toolbar is-active">
<button id="btn-new" class="btn"
data-action="menu">New</button>
<div id="menu-new" class="menu">
<ul> ... </ul>
</div>
</div>
</div>
.is-active .btn { color: #000; }
.is-active .menu { display: block; }

33. Activating the Menu
with a Sibling Selector
<div id="content">
<div class="toolbar">
<button
id="btn-new"
class="btn is-active"
data-action="menu">
New
</button>
<div id="menu-new" class="menu">
<ul> ... </ul>
</div>
</div>
</div>
.btn.is-active { color: #000; }
.btn.is-active + .menu { display: block; }

34. Why Parent and Sibling States
are Problematic
* Applying a state to each module is that it is no longer
clear where this rule set should go
* Applying a state to each button is the preferred
approach

35. Handling State Change with
Attribute Selectors
* Isolating states from layout and module classes
* Allowing easier transitions between multiple states

36. Attribute selectors convention
.btn[data-state=default] { color: #333; }
.btn[data-state=pressed] { color: #000; }
.btn[data-state=disabled] { opacity: .5; pointer-
events: none; }
<button class="btn"
data-state=“disabled">Disabled</button>
$(".btn").bind("click", function(){
$(this).attr('data-state', 'pressed');
});

37. Animations in
current browsers
@-webkit-keyframes fade {
0% { opacity:0; }
100% { opacity:1; display:block; }
}
.is-visible {
opacity: 1;
animation: fade 2s;
}
.is-hidden {
opacity: 0;
animation: fade 2s reverse;
}
.is-removed {
display: none;
}
function showMessage (s) {
var el = document.
getElementById('message');
el.innerHTML = s;
el.className = 'is-visible';
setTimeout(function(){
el.className = 'is-hidden';
setTimeout(function(){
el.className = 'is-removed';
}, 2000);
}, 3000);
}

38. Defining States with
Pseudo-classes
.btn {
background-color: #333; /* gray */
}
.btn:hover {
background-color: #336; /* blueish */
}
.btn:focus {
/* blueish focus ring */
box-shadow: 0 0 3px rgba(48,48,96,.3);
}

39. Sub-module States
with Pseudo-classes
.btn {
background-color: #333; /* gray */
}
.btn:hover {
background-color: #336; /* blueish */
}
.btn:focus {
box-shadow: 0 0 3px rgba(48,48,96,.3);
}
.btn-default {
background-color: #DEDB12; /* yellowish */
}
.btn-default:hover {
background-color: #B8B50B; /* darker yellow */
}

40. Modules, Sub-modules,
Class States
and Pseudo-class States
.btn { ... }
.btn:hover { ... }
.btn:focus { ... }
.btn-default { ... }
.btn-default:hover { ... }
.btn.is-pressed { ... }
.btn.is-pressed:hover { ... }
.btn-default.is-pressed { ... }
.btn-default.is-pressed:hover { ... }

41. Modular Media Queries
/* default state for nav items */
.nav > li {
float: left;
}
/* alternate state for nav items on small screens
*/
@media screen and (max-width: 400px) {
.nav > li { float: none; }
}

42. Demo

43. Performance
* Performance Tool
* Depth of Applicability
* How CSS gets evaluated
* HTML5 and SMACSS
* Prototyping
* Formatting Code

44. Performance Tool
* Goolge page-speed tool
* Think with Google

45. Depth of Applicability
#sidebar div, #footer div {
border: 1px solid #333;
}
#sidebar div h3, #footer div h3 {
margin-top: 5px;
}
#sidebar div ul, #footer div ul {
margin-bottom: 5px;
}
* Minimizing the Depth
* e.g body.article > #main > #content > #intro > p > b
* e.g .article #intro b
.pod {
border: 1px solid #333;
}
.pod > h3 {
margin-top: 5px;
}
.pod > ul {
margin-bottom: 5px;
}

46. How CSS Gets Evaluated
body div#content p { color: #003366; }
* Evaluated on element creation (CSS flow)
* Evaluated from right to left

47. Which is Inefficient
* Rules with descendant selectors
* e.g. #content h3
* Rules with child or adjacent selectors
* e.g. #content > h3
* Rules with overly qualified selectors
* e.g. div#content > h3
* Rules that apply :hover to non-link elements.
* e.g. div#content:hover

48. Selector Performance
<p class="bodytext">
* No more than a single element to determine styling is
inefficient

49. Constrain yourself,
don’t choke yourself
* Use child selectors
* Avoid tag selectors for common elements
* Use class names as the right-most selector

50. HTML5 and SMACSS
* Increase the semantic value of a section of HTML and
content

51. <nav> Implementation
<nav class="nav-primary">
<h1>Primary Navigation</h1>
<ul>…</ul>
</nav>
<nav class="nav-secondary">
<h1>External Links</h1>
<ul>…</ul>
</nav>
nav.nav-primary li {
display: inline-block;
}
nav.nav-secondary li {
display: block;
}

52. Add Dropdown to Every Element
<nav class="nav-primary">
<h1>Primary Navigation</h1>
<ul>
<li>About Us
<ul>
<li>Team</li>
<li>Location</li>
</ul>
</li>
</ul>
</nav>

53. Augmented <nav> CSS
nav.nav-primary li {
display: inline-block;
}
nav.nav-secondary li,
nav.nav-primary li li {
display: block;
}

54. In SMACSS-style
.l-inline > * {
display: inline-block;
}
.l-stacked > * {
display: block;
}
<nav class="l-inline">
<h1>Primary Navigation</h1>
<ul>
<li>About Us
<ul class="l-stacked">
<li>Team</li>
<li>Location</li>
</ul>
</li>
</ul>
</nav>

55. Prototyping
* Has some sample to follow
* Show states
* Review localization
* Isolate dependencies

56. Formatting Code
* Colour Declarations
* Grouping Properties
* 1. Box: display, float, position, left, top, height...
* 2. Border
* 3. Background
* 4. Text
* 5. Other

57. T H A N K
YOU