How to recognise when it is appropriate to code CSS [closed]


Tags: css,wordpress,class,html,rules

Problem :

I am working on a custom CSS file within a wordpress theme installation.

Within the CSS, there are times when I need to identify something like '.example', other times when it must be displayed as '#example' and other times when it is fine to keep it as 'example'.

Could someone please clarify the rules and how I can distinguish and decide for myself in the future which one to use in each instance?

This might have something to do with div ids and classes.



Solution :

There is no 100% rule but generally:

An id must be unique, therefore any styles applied to an ID are only usable for the one element on the page. Therefore it usually makes more sense to style by class rather than ID because the mjority of the time you are going to want to reuse your styles. Additionally using an ID makes it harder to override the style later because id's hijack specificity.

I even take this one step further in that nothing should EVER be styled by ID but rather always styled by class. The one exception i occasionally make is for page-level scoping based on the id of the body tag. But even then a class is just as useful.

Id recommend reading up on OOCSS (note: i dont use any of the files used to illustrate the examples - im solely referencing the FAQ)


    CSS Howto..

    CSS Background Color Not Showing

    How to embed a custom bitmap font into website using CSS

    How to Make A Fancy Arrow Using CSS?

    express: how to send html together with css using sendFile?

    How to change first word color through css [duplicate]

    How to match baseline in two floating divs

    How do I resize an image in IE 8

    How to add CSS style to focused anchor in HTML

    How to fast-blur in css/js?

    How to read minified CSS?

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    How to change height of ui-grid row?

    how to prevent css div popup from jumping back to the top of the page

    How to add padding to a ul/li menu with a background image?

    how to highlight specific control with css [duplicate]

    HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?

    How to get an input set to display block to fade in with css

    How can I use CSS to preserve line breaks in an HTML block?

    How to implement the button css like Spotify play button in the table row

    how to use the CSS contains-element selector with input elements?

    how to add items into a CSS based text rotator (similar to news ticker)

    How to add a CSS table next to my google map?

    How to replace with a
    filled with CSS?

    how can I use of a php variable into a .css file

    How do I make entire div a link? [duplicate]

    How to force inline-blocked divs to same height

    How should I use `position` and other properties correctly to position my web page?

    How to add multiple link styles on the same page?

    Div / CSS / ZIndex - how to overlap pictures?

    how to locate submenu elements (xpath, className or css locators)