+- GetSimple Support Forum (http://get-simple.info/forums)
+-- Forum: GetSimple (http://get-simple.info/forums/forumdisplay.php?fid=3)
+--- Forum: General Questions and Problems (http://get-simple.info/forums/forumdisplay.php?fid=16)
+--- Thread: CSS Stycling technique (/showthread.php?tid=4011)
CSS Stycling technique - bhwebco - 2012-12-14
I was just curious how the rest of you do your Cascades. For example. Do any of you just do your styling straight in to the page creation form using style tags.
Ive found that if I am using style rules that only apply to a specific page and are never seen again on the site that its pointless to hard code the rules in to the CSS file so I just use the style tags and write all my markup directly in to the page.
The only rules I hard code are specific to throughout the template or if i intend on using the template on different CMS's
I havent done much research on it but it works brilliantly but I never considered if it was a "proper" technique. As a professional designer of 13+ years I have learned that if the technique works it is a proper technique but I was just wondering how some of the rest of you do your page specific markup?
RE: CSS Stycling technique - shawn_a - 2012-12-14
You typically never put styles inline aside form one offs.
Plus styles are a pain in the ass in most editors, they like to reformat stuff how they please.
It takes 5 seconds to add a class, in fact it should be second nature to add ids and classes to all elements you write , then you just style it later on all at once.
Or build up your own collection of styles you can use if you use them alot but do not want to really style your site.
.margin-none
.alert
.well
for example grid systems you can do quick stuff like.
.span4
learn specificity and you can do alot of stuff easier and smarter.
need to target a specific page and change a few things then override the defaults using specificity.
Code:
h2 { font-size:20px }
#pagename h2 {font-size:30px } /* this works because we put the page slug as id in the body tag */
Or alternative heading colors.
h2 {color:blue }
h2.alt1 { color:red } /* h2 with a class of alt1 */
use multiple classes
<h2 class="title bold italic">heading 2</h2>RE: CSS Stycling technique - bhwebco - 2012-12-14
I typically do hardcode my CSS into the sheet its self but ive always had a thing about big CSS files and when I write them I do my best to keep them as light as possible.
My site im working on now is my main and it is visually based off of one of the themes here called mycompany, I mostly just liked the style but I did away with every line of its css and images and just built my own images and CSS just because I didnt want to scrape off somebody elses work.
I am glad you mentioned the body slug, that is one part of the template I forgot completely about when I wrote out the code so had to go back and add that in
RE: CSS Stycling technique - Timbow - 2012-12-14
(2012-12-14, 05:43:27)shawn_a Wrote:Code:h2 { font-size:20px }
#pagename h2 {font-size:30px } /* this works because we put the page slug as id in the body tag */
Aha - Clever! I had seen that <body id="<?php get_page_slug(); ?>" > but never knew it's use. Handy!
RE: CSS Stycling technique - bhwebco - 2012-12-15
Yeah that body slug makes things incredibly convenient. I created separate templates for each of my areas simple because I completely forgot about that slug and didnt even include it in my template. Think the separate templates will still be needed because they all carry different sidebar variations so not a loss but will certainly make page styling alot less of a thought process. Wish id have remembered that two weeks ago though.