-
Ask a question and get free supportUnlock new privileges and see hidden discussionsWin prizes and earn reputation
-
Question of the day ~ How often do you braai?
-
Afristay giveaway.Win a 2-night stay for two people at an establishment of your choice with R1,000 in spending money. Enter here.
Sign up with GoogleCSS3 Best Practice
- Thread starter Thor
- Start date
scudsucker
Executive Member
- Joined
- Oct 16, 2006
- Messages
- 9,024
I'd agree with rorz0r. One place for all the rules that refer to .body
I'd go a little further though and suggest you investigate SASS; CSS is kind of irritating so SASS (or LESS, if you must) makes writing styles much more pleasant.
In that case you can separate your font styles and bg image styles in a sensible way; and the SASS/LESS compiler will sort it out for you.
I'd go a little further though and suggest you investigate SASS; CSS is kind of irritating so SASS (or LESS, if you must) makes writing styles much more pleasant.
In that case you can separate your font styles and bg image styles in a sensible way; and the SASS/LESS compiler will sort it out for you.
I think I know what you're refering to, "seperation of concerns", along the lones of https://www.viget.com/articles/client-side-separation-of-concerns-are-we-doing-it-wrong and http://blog.teamtreehouse.com/the-separation-of-structure-presentation-and-behavior-is-dead
As mentioned you probably want to use SASS or something similar to get this right.
I usually keep my font styling in a seperate css file to the rest of my stuff.
I'm not 100% sure why yet but it works for me
Something else to look at is BEM - http://getbem.com/introduction/
No need to go "all in" on how they're doing it but their naming structure is pretty cool.
Some resources:
https://css-tricks.com/bem-101/
https://www.smashingmagazine.com/a-new-front-end-methodology-bem-blocks-reiteration/
As mentioned you probably want to use SASS or something similar to get this right.
I usually keep my font styling in a seperate css file to the rest of my stuff.
I'm not 100% sure why yet but it works for me
Something else to look at is BEM - http://getbem.com/introduction/
No need to go "all in" on how they're doing it but their naming structure is pretty cool.
Some resources:
https://css-tricks.com/bem-101/
https://www.smashingmagazine.com/a-new-front-end-methodology-bem-blocks-reiteration/
Thor
Honorary Master
- Joined
- Jun 5, 2014
- Messages
- 44,236
I think I know what you're refering to, "seperation of concerns", along the lones of https://www.viget.com/articles/client-side-separation-of-concerns-are-we-doing-it-wrong and http://blog.teamtreehouse.com/the-separation-of-structure-presentation-and-behavior-is-dead
As mentioned you probably want to use SASS or something similar to get this right.
I usually keep my font styling in a seperate css file to the rest of my stuff.
I'm not 100% sure why yet but it works for me
Something else to look at is BEM - http://getbem.com/introduction/
No need to go "all in" on how they're doing it but their naming structure is pretty cool.
Some resources:
https://css-tricks.com/bem-101/
https://www.smashingmagazine.com/a-new-front-end-methodology-bem-blocks-reiteration/
Thanks for the tips guy's I am a regular SASS user I just dont like firing up the compiler and stuff for simple jobs I can achieve with a single stylesheet like this.
As you can see my vanilla CSS3 best practises is a bit out hence the post.
I like the class idea for the background assuming what you mean was:
HTML
HTML:
<body class="website-background">
//content
</body>
Thanks for that BEM link. That is awesome. We have strict naming conventions and structures for everything else, why not css.
One of my favorite things about angular 2 is its use of shadow Dom (native and emulated) to sandbox styles in your components, solving a lot of these issues (unless you go and build one massive component, but then you have other things to worry about)
One of my favorite things about angular 2 is its use of shadow Dom (native and emulated) to sandbox styles in your components, solving a lot of these issues (unless you go and build one massive component, but then you have other things to worry about)
Last edited:
I don't really understand the question (although it has been a long day) – what's the point of having two rule sets with the same selector?
Also:
1. <3 autoprefixer
2. VS Code > Atom > Brackets.
Also:
1. <3 autoprefixer
2. VS Code > Atom > Brackets.
For something simple you can keep it all in a single rule, no need for complexity.
I don't really understand the question (although it has been a long day) – what's the point of having two rule sets with the same selector?
Also:
1. <3 autoprefixer
2. VS Code > Atom > Brackets.
Like you have seperation of concerns in development (MVC, etc), so you get to the stage of your site/app/xxx that you want to have manageable css.
There are a couple of different methods to do this, SASS, BEM, etc and one of them is basically to have your layout rules in a selector and your styling/presentation rules in a different selector: http://www.xaprb.com/blog/2005/12/15/css-good-practice-separate-layout-and-presentation/
Yes I'm familiar with all of that, but he wasn't suggesting two different selectors, but instead the same one twice. That is what confuses me.
Thor
Honorary Master
- Joined
- Jun 5, 2014
- Messages
- 44,236
Exactly it's the same selector although it's doing to very different things.
And I was wrong uses classes is the better practice in that case so I opted for it.
Thor
Honorary Master
- Joined
- Jun 5, 2014
- Messages
- 44,236
Agreed, thanks for the link I will be adopting the BEM methodology.
The Block Element Modifier naming convention and the thought behind that is very cool and worth adopting.
Lookout though - going full into it may be very much overkill!
I'm still missing the point
It's a body, it's not something you swap out often (in which case you can just swap out the whole stylesheet). If you wanted to optimize reuse of styles for buttons perhaps, then something like BEM or OOCSS might make sense (like the "btn btn-primary" idea in Bootstrap).
It's a body, it's not something you swap out often (in which case you can just swap out the whole stylesheet). If you wanted to optimize reuse of styles for buttons perhaps, then something like BEM or OOCSS might make sense (like the "btn btn-primary" idea in Bootstrap).
I'm still missing the point
It's a body, it's not something you swap out often (in which case you can just swap out the whole stylesheet). If you wanted to optimize reuse of styles for buttons perhaps, then something like BEM or OOCSS might make sense (like the "btn btn-primary" idea in Bootstrap).
From the OP it looked liked Thor was/is trying to do a seperation type thing, possibly without knowing it, so I thought to give him a pointer in that direction.
For that specific example in the OP there isn't really a need to have the 2 rule definitions, unless you were using SASS and extracted those to 2 different mixins(thingies) or whatnot and included them in the body rule.
The only thing doing it like that is going to do is confuse anyone that works on it after you.
Put body specific things in it's own class. Put background things in their own.
eternaloptimist
Well-Known Member
- Joined
- Jul 10, 2013
- Messages
- 175
I also don't understand why you are separating them :wtf:
BEM is pretty cool but can get super confusing real quick. I think Google used in Material Design Lite.
Also, that line height seems specific. Looks like a magic number to me, check this out:
http://csswizardry.com/2012/11/code-smells-in-css/
BEM is pretty cool but can get super confusing real quick. I think Google used in Material Design Lite.
Also, that line height seems specific. Looks like a magic number to me, check this out:
http://csswizardry.com/2012/11/code-smells-in-css/
Thor
Honorary Master
- Joined
- Jun 5, 2014
- Messages
- 44,236
It is magic