https://github.com/teles/css-para-gente-grande
Especificações de arquitetura css e melhores práticas.
https://github.com/teles/css-para-gente-grande
Last synced: 2 months ago
JSON representation
Especificações de arquitetura css e melhores práticas.
- Host: GitHub
- URL: https://github.com/teles/css-para-gente-grande
- Owner: teles
- Created: 2015-11-24T14:00:18.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-12-10T13:32:49.000Z (over 9 years ago)
- Last Synced: 2025-02-17T21:06:38.342Z (3 months ago)
- Homepage:
- Size: 2.93 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# CSS para gente grande
## Tópicos
### Diretórios e arquivos
- [ ] O que tem no diretório base/?
- [ ] O que tem no diretório base/properties/?
- [ ] O que tem no diretório base/utilities/?
- [ ] O que tem no diretório helpers/?
- [ ] O que tem no diretório helpers/functions/?
- [ ] O que tem no diretório helpers/mixin/s?
- [ ] O que tem no diretório helpers/variables/?
- [ ] O que tem no diretório modules/?
- [ ] O que tem no diretório module/module-1/?
- [ ] O que tem no arquivo-principal?
### Boas práticas
- [ ] - Declares seus imports em um único arquivo.
- [ ] - Não tenha media-queries em arquivos separados.
- [ ] - Defina seus breakpoints como variáveis.
- [ ] - Tenha uma paleta de cores.
- [ ] - Defina cores por contexto baseado na sua paleta.
- [ ] - Crie um sistema de iconfont baseado em glifos.
- [ ] - Padronize seus espaçamentos
- [ ] - Documente seu css
## Nomenclatura
- [ ] - Nomenclatura para componentes, classes aninhadas, estados, e variações.
## Zen do css
- [ ] - Explícito é melhor que implícito
- [ ] - Nomeei pelo contexto não pela aparência
- [ ] - Escreva primeiro para mobile
- [ ] - Renderize primeiro para mobile
## Arquitetura de diretórios para projetos css
A estrutura de um projeto css pode ser definida a partir da estrutura de diretórios e arquivos. A seguir um exemplo de estrutura de arquivos que segue o css-styleguide:
├── base/
│ ├──icon-font
│ ├──reset
│ ├──typography
│ └── properties/
│ │ ├──float
│ │ ├──spacing
│ │ ├──other-property-1
│ │ ├──other-property-2
│ │ └──other-property-n
│ └── utilities/
│ ├──utility-1
│ ├──utility-2
│ └──utility-n
├── helpers/
│ ├── functions
│ │ └──spacing
│ ├── mixins/
│ │ ├──mixin-1
│ │ ├──mixin-2
│ │ ├──mixin-n
│ └── variables/
│ ├──icon-font
│ ├──grid
│ ├──pallete
│ ├──spacing
│ └──typography
└── modules/
│ ├──module-1/
│ │ ├──module-1
│ │ ├──module-1-state
│ │ └──module-1-doc
│ ├──module-2
│ └──module-n
└─ arquivo-principal