The document discusses a CSS methodology called Argon, which aims to address issues like bloated code and development friction by promoting predictability and reusability in styling. It contrasts Argon with other methodologies such as BEM and OOCSS, highlighting its principles like class usage, avoiding ID styling, and maintaining consistency across teams. The document also emphasizes the importance of discipline over syntax in achieving maintainable CSS and includes guidelines for usage, exceptions, and additional resources for further reading.

1. ROLLING YOUR OWN
CSS METHODOLOGY
Dave Shea

2. section {
color: black;
}

3. section {
color: black;
}
.page section {
color: blue;
}

4. section {
color: black;
}
.page section {
color: blue;
}
.page section > ul {
color: black;
}

5. section {
color: black;
}
.page section {
color: blue;
}
.page section > ul {
color: black;
}
.page section > ul li:first-child {
color: blue;
}

6. section {
color: black;
}
.page section {
color: blue;
}
.page section > ul {
color: black;
}
.page section > ul li:first-child {
color: blue;
}
@media only screen and (min-width: 480px) {
section,
.page section,
.page section > ul,
.page section > ul li:first-child {
color: orange;
}
}

7. section {
color: black;
}
.page section {
color: blue;
}
.page section > ul {
color: black;
}
.page section > ul li:first-child {
color: blue;
}
@media only screen and (min-width: 480px) {
section,
.page section,
.page section > ul,
.page section > ul li:first-child {
color: orange;
}
}
* {
color: black !important;
}

8. CSS is Simple!

10. So maybe it’s not.

11. What are we going
to do about it?

12. WHO AM I?

13. @mezzoblue @mobify

15. LET’S TALK
ABOUT CSS

16. Why think
about this?

17. OUR PROBLEMS
TO SOLVE

18. Bloated Codebase

19. Development
friction

20. Growing team

21. The Goal

22. WHAT’S A CSS
METHODOLGY?

23. A Naming
System

24. PRIOR ART
• BEM
• OOCSS
• SMACSS
• SuitCSS

25. Why not use
the others?

26. Why not use
Bootstrap or
Foundation?

27. Framework !=
Methodology

28. The last thing
the world needs
is another one.

29. But we built
one anyway

30. It’s called Argon

31. Is Argon right
for you?

32. Truthfully…
probably not

33. This is a case study

34. What To Do

35. What To Do

36. WHAT WE WANT
FROM ARGON

37. Predictability

38. DRY

39. DRY
Don’t Repeat Yourself

40. .button {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 3px;
color: #fff;
background: gradient($grey20, $grey18, 50%);
font-size: 1rem;
text-decoration: none;
}
.input {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 3px;
color: #000;
background: #fff;
font-size: 1rem;
text-decoration: none;
}

41. .button, input {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 3px;
font-size: 1rem;
text-decoration: none;
}
.button {
color: #fff;
background: gradient($grey20, $grey18, 50%);
}
.input {
color: #000;
background: #fff;
}

42. Re-usability

43. .contactpage .submit-form div.inline-options .form-element {
display: inline-block;
float: left;
width: 25%;
}

44. .form .form-element {
display: inline-block;
float: left;
width: 25%;
}

45. Modularity

48. No specificity
battles

49. section {
color: black;
}
.page section {
color: blue;
}
.page section > ul {
color: black;
}
.page section > ul li:first-child {
color: blue;
}
@media only screen and (min-width: 480px) {
section,
.page section,
.page section > ul,
.page section > ul li:first-child {
color: orange;
}
}
* {
color: black !important;
}

50. Team-wide
consistency

51. Argon extra credits: @jam_sbryant & @kbingman

52. ANATOMY OF
A SELECTOR

53. AT-A-GLANCE UNDERSTANDING
.swift-project.-activeProject ._filterField {
width: 25%;
}

54. Ugly selectors?
You bet they are.

55. NAMESPACE
.swift-project.-activeProject ._filterField {
width: 25%;
}

56. (Maybe not our
best idea)

57. COMPONENT
.swift-project.-activeProject ._filterField {
width: 25%;
}

60. MODIFIER
.swift-project.-activeProject ._filterField {
width: 25%;
}

63. DESCENDANT (SUB-COMPONENT)
.swift-project.-activeProject ._filterField {
width: 25%;
}

67. ARGON IDEALS

68. Classes for
everything

69. No ID styling

71. #nav {
margin: 0;
}

72. .nav {
margin: 0;
}

73. No styling of
HTML elements

74. h2 {
font-size: 1rem;
}

75. .header-2 {
font-size: 1rem;
}

76. EXCEPTION
base-html.css

77. Don’t over-select

78. THIS IS UNACCEPTABLE
.panel { display: block; margin: 1rem 0; font-size: 0.8rem; }
.panel .panel-wrapper { padding: 1.5rem; }
.panel .panel-list { width: 50%; float: left; }
.panel .panel-list ul.item-list { margin: 0; list-style: none; }
.panel .panel-list ul.item-list li.item { display: block; margin: 0.5rem 0; }
.panel .panel-list ul.item-list li.item a { font-weight: bold; }
.panel .panel-list ul.item-list li.item a:hover,
.panel .panel-list ul.item-list li.item a:focus { text-decoration: underline; }
.panel .panel-list ul.item-list li.item a span.prompt::before { content: "$ "; }
.panel .panel-list ul.item-list li.item a i { font-style: normal; }

81. NO !important

82. Argon flattens
to BEM

83. .project__filterField-—conditionValue {
width: 25%;
}

84. .swift-project ._filterField.-conditionValue {
width: 25%;
}

85. .swift-project .__filterField.--conditionValue {
width: 25%;
}

86. .swift-project .__filterField.--conditionValue {
width: 25%;
}

87. .swift-project ._filterfield.-conditionvalue {
width: 25%;
}

88. .swift-project ._filterfield.-conditionvalue {
width: 25%;
}

89. NESTED ARGON
.swift-project {
._filterList {
width: 50%;
}
&.-activeProject {
._filterList {
width: 100%;
}
}
._filterField {
&.-conditionValue {
width: 25%;
}
}
}

90. vs. BEM
.swift-project__filterList {
width: 50%;
}
.swift-project--activeProject__filterList {
width: 100%;
}
.swift-project__filterField--conditionValue {
width: 25%;
}

91. HTML (ARGON)
<div class="swift-project -activeProject">
<div class="_filterList">
<input type="text" class="_filterField" />
<input type="text" class="_filterField" />
</div>
<button type="submit" class="_filterApply">
Okay
</button>
</div>

92. HTML (BEM)
<div class="swift-project--activeProject">
<div class="swift-project--activeProject__filterList">
<input type="text" class="swift-project--activeProject__filterField" />
<input type="text" class="swift-project--activeProject__filterField" />
</div>
<button type="submit" class="swift-project--activeProject__filterApply">
Okay
</button>
</div>

93. Exceptions

94. JAVASCRIPT? DON’T TOUCH!
.jsSwiftProject {
width: 25%; // NO! BAD!!!
}

95. STATES? ONLY VISIBILITY STYLING
.is-visible {
display: inline-block;
}
.is-hidden {
display: none;
}

96. OTHER STUFF WE HAVE RULES FOR
• White space
• Style rule ordering
• File structure
• z-index scale
• Typography scale
• Grid system
• Colour
• etc.

97. FURTHER READING / WATCHING
• High-level advice and guidelines for writing sane, manageable, scalable CSS
• The Modular CSS (BEM/OOCSS) naming conundrum
• Medium’s CSS is actually pretty f***ing good.
• Slaying the Dragon: Refactoring CSS for Maintainability – Alicia Liu at Front-Trends 2014
• Code Refactoring for America
• Pixels are expensive
• Let’s Play Nice with CSS Tools & Methodologies – Brad Westfall at HTML5DevConf

98. ROLLOUT

99. New features only

107. But, the design
changed!

110. OUTCOME

111. Ramp up?

112. NEED GREAT DOCS

113. Forces thought

114. Quick code reviews

116. Debugging

119. Over-reliance
on modifiers

120. File sizes?

121. Only works for
controlled systems

122. Will the cost:benefit
ratio break down?

123. WRAPPING UP

124. The big
breakthrough:

125. It’s not the syntax

126. It’s the discipline

127. Every project? No.

128. Favour shipping

129. Be wary of “The
Perfect Syntax”

130. The proof is in the
implementation

131. Build systems that
people understand

132. THANKS!
http://mezzoblue.com/presentations/2015/fitc

133. FURTHER RESOURCES
• A Maintainable Style Guide
• Combine matching media queries with Grunt
• Setting up Sass and Compass with source maps
• Using source maps with Sass 3.3
• csste.st - The How and Why of CSS Testing
• Code refactoring for America