A talk made for the companies Roga (http://rogalabs.com) and Stant (http://www.stant.com.br/) to present a CSS development methodology, RSCSS (rscss.io) . This talk held in July 2017 sought to present the main concepts of the methodology and to show practical examples of it. - http://denisvieira.js.org/

1. Styling CSS without
losing your sanity
DENIS VIEIRA
…
1

2. denisvieira.js.org
DENIS VIEIRA
Android Developer at
Passionate per frontend development
and javascript .
…
2

3. CSS is
complicated
MYTH
…
3 . 1

4. …
3 . 2

5. CSS feels complicated
REALLY
…
3 . 3

6. TRUTH
It doesn't have to
…
3 . 4

7. What does this class mean?
Is this class being used?
If I make an X class,
will it conflict?
…
4 . 1

8. Meditation Technique ?
…
4 . 2

9. A Library ? *-*
…
4 . 3

10. More one Framework ?
…
4 . 4

11. A METHODOLOGY !!!!
…
4 . 5

12. Why use
methodologies
with CSS ??
…
5 . 1

13. Many other
methodologies
BEM
OSCSS
SMACSS
SUITCSS
DRYCSS
OOCSS
ITCSS
…
5 . 2

14. What IS the point ?
…
5 . 3

15. "avoid" global styles
#1
…
5 . 4

16. easily reuse
#2
…
5 . 5

17. The approach you choose is that
it will make you prone to having
a very complicated CSS or not
…
5 . 6

18. Writing CSS
…
6 . 1

19. Pre-processors
.nav {
ul {
li {
a {
...
}
}
}
}
.nav {
width: 100%;
padding: 10px 25px;
position: fixed;
ul {
max-width: 940px;
li {
display: inline-block;
border: 1px solid #ccc;
padding: 10px 50px;
a {
color: #333;
&:hover {
text-decoration: none;
}
}
}
}
}
Over-nesting is a common
problem
Bad Lecture
Bad code generated
Direct tags generate
problem
.nav ul li a { ... }
…
6 . 2

20. …
6 . 3

21. Trying to improve...
…
6 . 4

22. Very dirty HTML
…
6 . 5

23. …
6 . 6

24. What if there was a way to
keep the two clean?
…
6 . 7

25. RSCSS
Reasonable System for CSS Stylesheet
Structure
http://rscss.io/
…
7 . 1

26. SPA
PWA
ANGULAR
VUEJS
REACT
…
7 . 2

27. #COMPONENTS
…
7 . 3

28. EVERYTHING IS A COMPONENT
#1
…
7 . 4

29. http://rscss.io/alguns seletores para aprender
…
7 . 5

30. Working with RSCSS
…
8 . 1

31. 1.1 Naming Components
The components must have
at least two words, separated
by a dash.
A like button (.like-button)
A search form (.search-form)
A article card (.article-card)
A card with tabs (.tabbed-card )
A music player ( .music-player )
…
8 . 2

32. 2. Elements
Elements are things within
your component.
…
8 . 3

33. 2.1 Naming Elements
Each component must have
elements. And they must
have classes with only one
word.
.search-form {
> .field {...}
> .action {...}
}
…
8 . 4

34. 2.2 Child Selectors
You should use the child
selector ( > ) whenever
possible. This prevents the
property from passing to
unwanted internal
components, and also
performs better than
descending selectors.
.article-card {
.title { /* good */ }
> .author { /* best */ }
}
…
8 . 5

35. 2.3 Multiple Words
For those elements that need
one or more words,
concatenate them without
traces or underscore.
.profile-box {
> .firstname { /* ... */ }
> .lastname { /* ... */ }
> .avatar { /* ... */ }
}
…
8 . 6

36. 2.4 Avoid using tags
as selectors
Use class whenever possible.
Tags are ok but may come
with a small loss of
performance because they
are not very specific and may
not be as descriptive either.
.article-card {
> h3 { /* ✗ avoid */ }
> .name { /* ✓ better */ }
}
…
8 . 7

37. 3. Variations
Components may have
variations and the elements too.
…
8 . 8

38. 3.1 Naming Variations
Variation classes must be
prefixed by a dash.
.like-button {
&.-wide { /* ... */ }
&.-short { /* ... */ }
&.-disabled { /* ... */ }
}
It's cool to think of this as a form of
command in the terminal .
…
8 . 9

39. 3.2 Variations in the
Elements
Just like the components, we
may want to vary the elements.
.shopping-card {
> .title { /* ... */ }
> .title.-small { /* ... */ }
}
This variation is specific to that element
(class), so there is no problem in putting it
adjacent, as shown below.
…
8 . 10

40. 3.3 Why use dash
prefixes?
It prevents ambiguity with elements, since both are
written with a single name.
The dash is faster to type, just a key.
Remembers how to pass commands on the UNIX
terminal.
Fast visualization and comprehension
…
8 . 11

41. RSCSS Cheats Sheets
…
9 . 1

42. 4. Nested
Components
<div class='article-link'>
<div class='vote-box'>
...
</div>
<h3 class='title'>...</h3>
<p class='meta'>...</p>
</div>
…
9 . 2

43. 4.1 Variations
.article-header {
> .vote-box > .up { /* ✗ avoid this */ }
}
Avoid modifying the internal component
through the main component.
…
9 . 3

44. 4.1 Variations
<div class='article-header'>
<div class='vote-box -highlight'>
...
</div>
...
</div>
Prefer to add a variation component and
applying the internal therefrom.
.vote-box {
&.-highlight > .up { /* ... */ }
}
…
9 . 4

45. 4.2 Simplify internal
components
<div class='search-form'>
<input class='input' type='text'>
<button class='search-button -red -large'></button>
</div>
Sometimes, when using nested components,
your markup can get a bit dirty
…
9 . 5

46. 4.2 Simplify internal
components
<div class='search-form'>
<input class='input' type='text'>
<button class='submit'></button>
</div>
You can simplify this by using the @extend
property of your preprocessor
.search-form {
> .submit {
@extend .search-button;
@extend .search-button.-red;
@extend .search-button.-large;
}
}
…
9 . 6

47. 5. Layouts
…
9 . 7

48. Components must be created in a way
that can be reused in different contexts.
Avoid placing these properties on
components
Positioning ( position, top, left, right, bottom)
Floats (float, clear)
Margins (margin)
Fixed dimensions (width, height) * With the exception of
elements that need to have even fixed sizes.
5.1 Avoid positioning
properties
…
9 . 8

49. 5.2 Set positioning
in parents
.article-list {
& {
@include clearfix;
}
> .article-card {
width: 33.3%;
float: left;
}
}
.article-card {
& { /* ... */ }
> .image { /* ... */ }
> .title { /* ... */ }
> .category { /* ... */ }
}
…
9 . 9

50. 6. Helpers
._unmargin { margin: 0 !important; }
._center { text-align: center !important; }
._pull-left { float: left !important; }
._pull-right { float: right !important; }
These classes have as main use, overwrite
values, put them in separate files and
name them with underscore.
Usually marked with ( !important ) . Use with extreme
caution and avoid them as much as possible.
…
9 . 10

51. 7. CSS Structure
/* css/components/search-form.scss */
.search-form {
> .button { /* ... */ }
> .field { /* ... */ }
> .label { /* ... */ }
// variants
&.-small { /* ... */ }
&.-wide { /* ... */ }
}
The RSCSS does not have a strong premise
for non-structure, having as only advice,
putting one component per file.
…
9 . 11

52. 7. CSS Architecture
@import 'components/*';
And use the glob matching .
…
9 . 12

53. https://github.com/rstacruz/stylelint-rscss
…
10

54. Referencies
http://rscss.io/
https://willianjusten.com.br/falando-sobre-rscss/
https://github.com/rstacruz/stylelint-rscss
https://medium.com/@mik01aj/rscss-77043f4fafb1
https://webdesign.tutsplus.com/courses/structuring-
stylesheets-with-rscss
https://codepen.io/willianjusten/pen/gPBJWq
Meetup Video : Rico St. Cruz - RSCSS ( MelbCSS )
…
11

55. THE END
denisvieira.js.org
DENIS VIEIRA
…
12