SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Semantic naming of elements: is it always possible?

    Is it always possible to come up with meaningful names for your divs?

    Sometimes I will end up using IDs like "column" just because I can't come up with a name that really reflects the content within. I'm not even sure if "column" is so bad.

    This is when I'm styling elements inside the main content area on a big site. Naming elements in page layout is still pretty simple.

    Am I being too picky?

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    It's not always possible but I try to choose names relavant to the data/things inside of it. Aka ADS or something like that...it's possible for the most part you jjust have to be imaginative.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think Ryan is right. The main thing is to avoid getting any "presentation" in the names. The best way is just to name them after their content. But in any case, no one is going to shoot you over this.

  4. #4
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    Austin Texas
    Posts
    289
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well in this case I've got two divs, and their purpose is to split some content into two columns. Maybe it's the old way of thinking that's getting me down.

    I feel odd having two divs with the same class that's specific to the information. Right now I'm arranging a list of cities, and if I called the divs .cities, it wouldn't make sense if I would use them to the same effect on a list of states, or streets, or what have you.

    I could make the rule declaration: .cities, .states, .streets{}, but it seems a waste, and possibly an equally-sized obstacle to a future designer.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I'd do something like this. Instead of .leftcolumn I'd do

    content_description_left
    then _right

    You can use longer names if you need ya know
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How far do we need to go to avoid "left" and "right", which seem like presentation issues to me? After all, the CSS is where these elements are positioned, and that can be changed in a heartbeat. Again, the semantic nazis are not going to get us on this.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,721
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Well it may help you remember which column is which if you look at your CSS file and forget the HTML structure

    .content_description
    .other_description

    Hard to tell which is left/right even if you look at the CSS (unless AP'ing) because lets say for example you see a visual difference in one of those columns, it takes more work to look at each style and figure out if that is the cause because you don't know which one you are effecting. I put some presentation names like that just for rememberance later on. I don't see a big issue with that.

    .red{color:red;}

    I have a problem with THAT because that goes above and beyond what I'm doing.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast kaloua3's Avatar
    Join Date
    Mar 2009
    Location
    Florida
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree. Actually, I find it VERY helpful to name the main parts "header," "footer," "nav-bar," and "content," with "sidebar-right" and "sidebar-left" (or "column-") for that very reason. In the end, it is how usable it is for me (later) and anyone looking at the code that is important, like adding lots of comments.

  9. #9
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    What helps me in coming up with a structure and naming scheme is to keep the HTML and CSS separated in my mind. I setup all my HTML documents without CSS in mind. How it displays in the browser is irrelevant to the structure of the page.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You can always just number the columns or sidebars. While the numbers do imply (perhaps incorrectly ) some sort of order between them it is still better than using left and right where you may have reversed them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Come up with a reusable naming convention throughout your site:

    article, section, section-entries, section-features, description, summary, photo, etc.....

    Then trigger off of the parenting wrapper, e.g.

    <div id="home">..</div> etc...

    #home .article {}

    Again, be ready for any complications that are thrown at you...

    I do something quite different when it comes to reusable markup:

    <div class="article-obj">...</div>

    I add -obj....

    What happens is if you have 10 different articles you want to reuse.. -obj-10 -Sillyness....

    But usually this never seems to be the case


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •