Slides of a lighting talk I gave for the 2014 fronteers conference on css naming

1. Ceci n'est pas une pipe
@wnas

2. About css naming
conventions.

3. What are they.

4. .g-form-checkbox {
// always
}

5. G is for the generic stuff
.g-form-checkbox {
// use
}

6. FORM is for the form stuff
.g-form-checkbox {
// a
}

7. CHECKBOX is for the …
.g-form-checkbox {
// carrousel
}

8. Why should you use them

9. .textAlignRight {
text-align: left;
}

10. We are wiser than that, right?

11. .button {
// be
}

12. .btn {
// excellent
}

13. .normalButton {
// to
}

14. .button button {
// each
}

15. .button {
// be
}
.btn {
// excellent
}
.normalButton {
// to
}
.button button {
// each
}
button {
// other
}

16. To make you think

17. To help you communicate

18. Don’t build pages

19. Build components

20. And elements

21. To get you started

22. BEM https://bem.info/method/

23. OOCSS http://oocss.org/

24. SMACSS https://smacss.com/

25. My choice?

26. Build your own

27. Pattern lab http://patternlab.io/

28. Atoms, molecules and
organisms

29. Examples

30. Atoms

31. <input>

32. .g-form-input {
// Never
border: 1px solid pink;
}

33. Types

34. .g-form-input {
// gonna
border: 1px solid pink;
}
.g-form-input[type=search] {
// give
border-color: orange;
}
.g-form-input[type=number] {
// you
border-style: dotted;
}

35. State

36. .g-form-input {
// up
border: 1px solid pink;
}
.g-form-input:focus {
// Never
outline: 0;
}
.g-form-input[type=search]:focus {
// gonna
border-width: 2px;
outline: 2px dotted blue;
}

37. You could also do…

38. .g-form-input {
// say
border: 1px solid pink;
}
.g-form-input.search {
// good bey
border-style: dotted;
}
.g-form-input.search.disabled {
// Never
border-color: lightgray;
}

39. .g-form-input {
// gonna
border: 1px solid pink;
}
.g-form-input-search {
// turn
border-image-outset: sides;
}
.g-form-input-search—disabled {
// around
border-left:0;
}

40. Be lazy!

41. Molecules

42. How they play together

43. .g-m-search {
// and
}}

44. .g-m-search {
// desert
}
.g-m-search .g-form-input {
// you
border-bottom: 5px;
}

45. Organisms

46. .g-o-header {
// now for something,
}
.g-o-header .g-form-input:focus {
// completely different
border-bottom-color: blue;
}

47. .g-o-header .g-m-search {
// the
}
.g-o-header .g-m-search .g-form-input:focus {
// Larch
border-top-color: khaki;
}

48. Templates

49. .g-t-search .g-form-input {
// red pill
border-color: red;
}

50. .g-t-result .g-form-input {
// blue pill
border-color: aqua;
}

51. Pages

52. .g-t-result.g-page-jammSession .g-form-input {
// almost done Krijn…
border: 0;
}

53. A few more pointers

54. Avoid using ID’s

55. Don’t over nest

56. Avoid direct child selectors >

57. Also avoid the Adjacent sibling
combinator (+) and the General
sibling combinator (~)

58. More than one class on
an element ain’t all bad.

59. <div
class=“g-form-button
g-form-button-inactive
g-form-button-primary”>
<button>Click me</button>
</div>

60. Talk about it!

61. @wnas