1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS: what's the bast way to do things?

Discussion in 'CSS' started by KewL, Feb 13, 2014.

  1. #1
    Hey guys, I've been coding websites in html/css for a few years now. My code always works, but I feel like it's horrible and there's much better ways to do things. Here's my question (I run into this all the time):

    Say my website has like 3-4 differently styled h2's, how would i go about styling theme in CSS?

    Here's a couple options my brain goes to, I'm wondering if one of these is the best, or if there's a better way I'm missing.

    Option #1: Have each unique h2 have a class, put the global styles in the normal h2 styling, and the unique stuff in the h2.class:

    
    h2 {
    color: black;
    }
    
    h2.sidebar {
    font-size: 2em;
    }
    
    h2:leftcol {
    font-size: 2.5em;
    }
    
    Code (markup):
    Option #2: Should I even put classes on the h2's? if the html looks like this?

    
    <div class="leftcol">
    <h2>Heading</h2>
    </div>
    
    <div class="sidebar">
    <h2>Sidebar Heading</h2>
    </div>
    
    Code (markup):
    So the other option would be:

    
    h2 {
    color: black
    }
    
    .sidebar h2 {
    font-size: 2em;
    }
    
    .leftcol h2 {
    font-size: 2.5em;
    }
    
    Code (markup):
    I'm sure theres a hundred ways to do this, this doesn't just apply to headings, but everything. I want my code to be consistent, and easily read. What should I stick to by?

    ------------------------

    I guess I'll throw in a second question, I don't see the point in using em's over px or %'s. Everyone says it's better but I don't understand why. How's it any different than doing this?

    
    body {
    font-size: 100%;
    }
    
    h1 {
    font-size: 250%;
    }
    
    h2 {
    font-size: 150%;
    }
    
    Code (markup):
    I'm sure it has it's benefits, I just don't understand the benefits it has, and would like a little explanation.

    Thanks guys.
     
    Solved! View solution.
    Last edited: Feb 13, 2014
    KewL, Feb 13, 2014 IP
  2. #2
    Option number two is usually your best choice -- you leverage inheritance to target them. This usually results in far less code overall since dimes to dollars if those are subsections, you're going to have a wrapping DIV (or HTML 5 SECTION/ARTICLE) there ANYWAYS -- an you can use that ID or class on the parent to nab EVERYTHING inside it, not just the headings. That's why we HAVE inheritance. The only time to put a class on a element with a semantic meaning (like P, LI, A, H2) is when it is being styled differently from it's siblings... particularly when you have a perfectly good parent wrapper.

    As to your question of %/em, the reason to use them instead of pixels is that they will automatically resize for users that have a different default font size, without forcing them to dive for the zoom. As a large fonts/120dpi user, I fully expect the fonts to default off a 20px base instead of the 16px most users have. There's a lot of us out there, and more coming with Win 7+ making the option more readily available, companies like Apple dramatically increasing the PPI, and so forth.

    Hence, well.. let's use screenshots from one of my sites as an example... this is the EXACT same markup and layout.

    First at Windows 3.x Small / Windows 95 to XP normal / "96dpi" / 100% / windows 7+ small
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal96.jpg

    Then the same at Windows 3.x 8514 / windows 95 to XP Large / "120dpi" / 125% / windows 7+ normal.
    http://www.cutcodedown.com/images/ewiUSB/ewiUsbComNormal120.jpg

    Notice the text is 25% larger, but the images remain the same size. That's why you're supposed to be doing it, so that users (like myself) aren't pissed off at having to dive for the zoom just to view your page. (that **** gets tired fast). People like myself use this setting because we have quality displays running a higher PPI (pixels per inch) and don't want to have to plaster our head 6" from it.... see how I ran 1024x768 under Win 3.1 on a 14" CRT, 1600x1200 on a 19" CRT, or 2560x1440 on a 27" LCD today. (which actually IS 25% more pixels per inch than your normal 1920x1080 at 23")

    Likewise you have the trend towards all in one media centers, where a ten foot interface means you want it even bigger, see Win7/8 and Linux support for 200% or more.

    It's also why elastic and semi-fluid design are important -- elastic meaning you base your widths and fonts on EM's so the whole layout expands/contracts based on the host font setting, and semi-fluid setting width limits so long lines of text aren't hard to follow, while still allowing the layout to shrink to fit. Auto-adjusting the width instead of declaring fixed widths also means the layout is far less likely to be a pain in the ass should someone still have to use the zoom due to poor choices in font size or face. (the latter increasingly a problem as more and more people use illegible goofy webfonts that make comic sans look good and waste bandwidth on nothing of value)

    There's a reason 99%+ of my websites start out with this in the CSS:
    body {
    	font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    #pageWrapper {
    	min-width:40em;
    	max-width:68em;
    	width:95%;
    	margin:0 auto;
    }
    Code (markup):
    Semi-fluid elastic layout with dynamic fonts... which done properly makes adding responsive layout a no-brainer, as it's just the next logical step in the process.
     
    deathshadow, Feb 13, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Oh, and my choice of option two, styling off the parent DIV, is assuming you're using numbered headings PROPERLY as in indicating the start of a subsection of the page, so you'd have tags like P and UL as siblings to it, with ALL of them wrapped in that parent DIV... remembering that a H1 is the parent heading (singular, only one per page) under which all H2 indicate the start of a subsection of the h1, h3 indicating the start of subsections of the h2 preceding them, and so forth, alongside HR indicating a change in section/topic where a heading is unwanted/unwarranted -- hence why I consider HTML 5's HEADER, NAV, SECTION, ASIDE, ARTICLE and FOOTER to be redundant, undoing all the progress and reduction of redundancies 4 STRICT introduced, and in general are little more than bloat or encouraging sloppy coding practices.

    IF you were to use HTML 5's tags like NAV and SECTION, you'd put the ID or class on that, and those H2 would be H1 since the new goof assed structural rules throws the entire reason to even HAVE numbered headings out the window.
     
    deathshadow, Feb 13, 2014 IP
  4. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #4
    Thanks death shadow, your explanations make so much sense. I have a million questions, but I'll hold back for a minute. I think it'd be more beneficial for me to post my next project for critique. Hopefully when i do, you can take a look at the source and identify the key problems with my code.

    Actually, care to explain that code to me?
    
    body {
        font:normal 85%/150% arial,helvetica,sans-serif;
    }
    
    Code (markup):
    I'm pretty sure I've seen something like that but i don't fully understand it. I'm guessing the "normal" refers to the font-weight, the end is the font-family, I just don't understand the percentages, why is there two?
     
    KewL, Feb 14, 2014 IP
  5. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Ok sorry, one more quick question, this ones important. So say I have something like this on my design.

    [​IMG]

    Should that section me a list, which each box an LI? or should each box just be a div?
     
    KewL, Feb 14, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    To me at least, list items should be short self contained items -- "bullet points", menu choices, so forth. These appear to be 'big enough' that they would have their own numbered headings (h2 most likely) -- "About me", "what do we do" and so forth. The moment they have headings, you've divided them into subsections -- that means you have all the semantics you need and there's no legitimate reason to throw a list around them from a semantics standpoint.

    I'd have those as something like: (assumes there's a parent DIV around all of them with an ID describing what these subsection are)

    <div id="aboutMe">
    	<h2>About Me</h2>
    	<p>
    		Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
    	</p>
    	<a href="#" class="moreButton">Read More</a>
    <!-- #aboutMe --></div>
    Code (markup):
    The unique ID's would be to pad the top and put those images in using CSS -- those images really strike me as presentational, the content makes sense without them... as such they have no business in the HTML. Only "content" images belong in a IMG tag. The class on the button might not be neccessary, but I'd use it just in case some time in the future you have anchors inline in your paragraphs. I'd also consider making the H2 an anchor so you have MEANINGFUL text in an anchor instead of the meaningless "read more" -- which is usually bad accessibility. I'd CONSIDER a TITLE attribute on that more button, but really if you have to use the TITLE attribute you're probably doing something wrong.

    See the bloated train wreck of asshattery known as Wordpress -- they overuse classes (something you were basically asking about in you original post) AND throw pointless/redundant TITLE attributes on just about everything. Big tip -- if your TITLE attribute is identical to the text inside the tag it's on, there's no reason to put a title on it... Well, unless you're building an accesskeys menu, and that's a whole other can of worms.
     
    deathshadow, Feb 14, 2014 IP
  7. ishubham

    ishubham Well-Known Member

    Messages:
    37
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #7
    Hi there,

    Seems like @deathshadow missed this question. The code is the short hand property for font.
    See this:

    
    font: (font-weight) (font-size/line-height) (font-family);
    
    Code (markup):
    This is how it goes, so the two percentages are actually font-size and line-height.
    According to w3schools, you can do it like:

    
    font: font-stylefont-variantfont-weightfont-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
    
    Code (markup):
     
    ishubham, Feb 16, 2014 IP
  8. KewL

    KewL Well-Known Member

    Messages:
    245
    Likes Received:
    16
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Ohh thanks man, I never knew about the short hand for fonts, that should make things quicker!
     
    KewL, Feb 17, 2014 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #9
    Sorry there, AFK for the weekend (for a change). @ishubham has it right (though I'd not use W3Schools garbage as an example) in that it's font size and line height.

    NEVER trust the default line-height as the HTML specification does not say what it should actually be; The HTML specification only SUGGESTS 110% to 130%, and when all they do is suggest browser makers do what they do best; go their own direction and to hell with what anyone else is doing. Now, over the past decade and a half the majority of browser makers have 'settled' on a default of dead center of that -- 120%... but the exception? Firefox. Depending on the font-face and font-size it seems to randomly run the gamut between those two values, in fact I've seen the default in some font faces go as far 'off the mark' as the same as the font-size.

    You also cannot trust it because it doesn't inherit consistently -- you change the font-size, you change the line-height -- ALWAYS. A good example of why:
    <div>Test</div>
    <div class="test2">Test</div>
    
    Code (markup):
    with this CSS:
    body {
    	line-height:200%;
    }
    
    div {
    	font-size:400%;
    	margin:0.2em;
    	margin-bottom:8px;
    	background:#CCC;
    }
    
    div.test2 {
    	font-size:400%;
    	line-height:200%;
    }
    Code (markup):
    I put a live copy here:
    http://www.cutcodedown.com/for_others/heightTest.html

    Try that in a few different browsers, it's good for a laugh... when line-heights are declared most browsers as a 'shortcut' to make things render 'faster' calculate it into PX and then leave it there until you say line-height again -- and that's REALLY not a desirable behavior.

    Some people (like the namby pamby sissies over at certain other "pointy" forum about sites, that mostly exists to hock poorly written books filled with some of the most ignorant bull out there) are under the delusion that you can declare the font-size without a metric (%/em/px/ex/whatever) and it will automatically inherit properly thus "font:normal 85%/1.5 arial,helvetica,sans-serif" -- this is wrong and broken. Not only is there nothing in the specification to say that's allowed, it doesn't work properly in all browsers at all default font sizes! "REAL" Opera (12-) flat out ignores it, Safari (but not chrome) bases it on 16px regardless of what you change the browser preference to, and FF screws it up at anything other than the default 16px/96dpi... Of course all the screenshots in the world and test-cases with full instructions can't convince the people advocating the technique of that; but what can one expect from a site filled with Yank-holes and Eric Meyer wieners.

    I always use the full condensed font declaration since I ALWAYS set the line-height. It's barely any more characters than saying both font-size and line-height anyways, and makes it clearer what's going on in the code. I'm all about minimalism, but not at the cost of clarity.

    As to my using 150% line height, I just like 'em taller -- makes text easier to read IMHO.
     
    deathshadow, Feb 17, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Oh, I also use 85% for a reason -- it works out to 14px at the alleged 96dpi setting; a perfect 14px would be 87.5%, so why 2.5% less? 87.5% works out to 17.5, which FF treats as 18 and rest of world treats as 17 thanks to a difference in how they round things off (lovely, no?). 85% gives 17px at 120dpi everywhere. As much as I like 'larger' by default, 18 is a bit much at 8514/large fonts/120dpi/125%/windows 7+ medium/whateverThey'reGonnaCallItNextWindowsRelease.
     
    deathshadow, Feb 17, 2014 IP