O documento descreve a estrutura ITCSS (Inverted Triangle CSS) para organizar arquivos CSS de forma hierárquica. Ela é dividida em seções de configurações, ferramentas, genérico, base, objetos, componentes e trumps. Cada seção adiciona estilos sobre as anteriores e evita sobreescrever regras definidas anteriormente.

1. ITCSS
@dielduarte
InvertedTriangleCSS.

2. DIELDUARTE?
Comecei como backend (delphi, php)
3+ anos trabalhando com front end
Apesar de ser front ainda brinco com back (node e php) em
projetos próprios.
Aprendi e aprendo muito no github
Atualmente sou desenvolvedor Front end na HotMart.

9. settings

10. _Variables.scss
/*
* Colors
*/
$white: #FFF;
$black: #000;
_modules.scss
/*
* Bootstrap Modules
*/
@import 'bootstrap';

11. tools

12. _mixins.scss
/*
* box-shadow mixins
*/
@mixin box-shadow ($arguments) {
-webkit-box-shadow: $arguments;
-moz-box-shadow: $arguments;
box-shadow: $arguments;
}

13. GENERIC

14. _reset.scss
/*
* Bootstrap Modules
*/
@import ‘normalize’;
*.scss
/*
* Box sizing
*/
* { box-sizing: border-box; }

15. BASE

16. _links.scss
/*
* Default styles for links
*/
a { text-decoration: none; }
_images.scss
/*
* Default styles for img
*/
img { width: 100%; }

17. OBJECTS

18. _list.scss
/*
* .lists object
*/
.list {
> li {
display: inline-block;
padding: 10px;
}
}

19. COMPONENTS

20. _sidebar.scss
/*
* .sidebar component
*/
.sidebar {
background-color: $black;
.list { color: $yellow; }
}

21. Evitesobescreverregras

22. TRUMPS

23. _aux.scss
/*
* trumps
*/
.hide { display: none; }
.clear { clear: both; }
.navbar { padding: 5px; }

24. main.scss
@import "_settings/**/*";
@import "_tools/mixins/*";
@import "_tools/placeholders/*";
@import "_generic/**/*";
@import "_base/**/*";
@import "_objects/**/*";
@import "_components/**/*";
@import "_trumps/**/*";

26. Dicas
Sempre escolha pelo mais simples para outros
desenvolvedores
Pratique, pratique e pratique…
Slush-itcss (https://github.com/dielduarte/slush-itcss)

27. Perguntas?