How do you organize your CSS?

5 replies
  • WEB DESIGN
  • |
How do you organize your CSS? How do you come up with id and class names (what naming conventions do you use)?





_____________________
www/picks4win/com
#css #organize
  • Profile picture of the author Evan-M
    I name them in reference to what they are and then separate them by type

    text options, template structure , menu options etc then

    headercontainer
    header
    headermenu
    sidebarright
    sidebarrightform
    footercontainer
    footer
    footermenu

    you get the point.

    if its a button to submit the sidebar form

    sidebarsubmit lol
    Signature

    Evan-M

    Easily The Worlds Best Wordpress Popup plugin

    Visit Website Design Firm For All Your Wordpress Coding Needs

    {{ DiscussionBoard.errors[3671598].message }}
    • Profile picture of the author oscarte
      Originally Posted by Evan-M View Post

      I name them in reference to what they are and then separate them by type

      text options, template structure , menu options etc then

      headercontainer
      header
      headermenu
      sidebarright
      sidebarrightform
      footercontainer
      footer
      footermenu

      you get the point.

      if its a button to submit the sidebar form

      sidebarsubmit lol

      _____________________
      www/picks4win/com[/FONT][/COLOR][/FONT][/COLOR]
      [/QUOTE]


      Wow you are suffering from classitis and idsittis; of all of those you only need: #header, #sidebar, #footer, .wrapper, .submit

      ex. #sidebar form input.submit
      {{ DiscussionBoard.errors[3682652].message }}
  • Profile picture of the author Trapped
    The names of classes and IDs have to reflect to "your" and to the elements name. So for example, if you need to style a menu then you would name the ID as #menu (unless this same menu, same style, will need to be used in another place of the same page, in that case you will want to instead create a class rather then an ID for the menu).

    It just really depends..on you, so you know where to go when you see a bug or need to make a modification.
    {{ DiscussionBoard.errors[3671603].message }}
    • Profile picture of the author Margy0110
      In addition to the already mentioned naming conventions, it is a standard procedure to start a div or class name with a lower case letter and capitalize the next words within the name. For instance, a div that would refer to a bottom right sidebar should ideally be named sidebarBottomRight
      {{ DiscussionBoard.errors[3672574].message }}
    • Profile picture of the author anestbaik
      hai,

      i use wordpress, so i just need to follow wordpress-css-style-name .. and a few my-own-custom-name ..
      {{ DiscussionBoard.errors[3734489].message }}

Trending Topics