https://github.com/lukyvj/css-methodology
My own CSS guidelines & methods
https://github.com/lukyvj/css-methodology
Last synced: about 1 month ago
JSON representation
My own CSS guidelines & methods
- Host: GitHub
- URL: https://github.com/lukyvj/css-methodology
- Owner: LukyVj
- License: mit
- Created: 2015-04-08T16:59:53.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2015-04-13T21:23:54.000Z (about 10 years ago)
- Last Synced: 2025-01-30T14:13:49.700Z (3 months ago)
- Size: 183 KB
- Stars: 1
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS-methodology
My own CSS guidelines & methods
---
- [Intro](#intro)
- [Spaces](#spaces)
- [Nesting](#nesting)
- [Classes](#classes)
- [Id](#id)
### Intro
Howdy stranger !
Welcome to my CSS-Methodology index, I decided to create this index since CSS is what I prefer to write when I have some free time, I also get some questions about my coding styles & conventions.. So here they are.
Keep in mind that it will be a mix of CSS and SASS code examples.
List will grow as much as possible, I'll fill it step by step with the time, so we can consider that it will never be "done"
----
### Spaces
#### CSS
```css
selector{
property: value;
}
selector otherselector{
property: value;
}
selector,
selector,
selector{
property: value;
}
```
#### SASS
```css
selector{
property: value;
otherselector{
property: value;
}
}
selector,
selector,
selector{
property: value;
}
```
### Nesting
#### SASS
```css
selector{
property: value;
selector{
property: value;
selector{
property: value;
&:hover{
property: value;
}
}
}
}
```
### Classes
#### CSS
```css
element.class{
property: value;
}
element.class-2{
property: value;
}
```
#### SASS
```css
element.class{
property: value;
}
element{
&.class-1{
property: value;
}
&.class-2{
property: value;
}
}
```
### Id
#### CSS
```css
#anId{
property: value;
}
```
> Note that I only use ids when I have to use Javascript. I prefer target any triggers and targets with ids.