Naming conventions for html / css + MVC?

Question

Are there any good articles on naming general naming conventions?

I want to clear the code ... from assets to models (Codeigniter) to HTML and CSS.

I'm also interested in how to structure CSS ... is it better to give all the unique meaning, that is, the search bar icon, or is it better to repeat classes like .search span.icon {?

Thanks Walker

Answer 1

HTML/CSS id class . , . , , , , -. , , .

Answer 2

, , . ( ).

- , .

Answer 3

CSS, "" . CSS , .

, HTML . <span class="something"><label>..., , span. divs spans, .

. , < H3 class= "searchResults" > UL , UL . , UL (, "searchResultsList" ), :

H3.searchResults + ul {some styling...;} H3.searchResults + div > * {some styling...;}

CSS, , , a, p .., , . , . , , . (.iconWhichAppearsOnceEver,.noBordersTable ..)

body{}
a {}
p {}
h1,h2,h3,h4,h5,h6 {}
h3.searchResults {}
...
table {}
thead {}
thead th {}
thead th a {}
thead th.noFill a {}
...

Answer 4

, . - , - , . Codeigniter - , .

, , . . test.php Test.

/ HTML - , , . , . , DIV, , "site_logo". DIV, , "" ..

, , "/ " , . , PHP CSS, HTML- .

Answer 5

, CSS :

.icon { background: left center no-repeat; padding-left: 20px; /* leave space for icon */
#SearchBar .icon { background-image: url(../images/icons/search.png); }

, , CSS ( ):

/* the icon is displayed by each entry; if it has no other class,
   it will show a "generic" icon */
.log .entry {
    padding-left: 20px; /* leave space for icon */
    background: url(../images/icons/log-generic.png) top left no-repeat;
}

/* slot a generic delete icon in */
.log .icon.delete {
    color: red;
    background-image: url(../images/icons/log-delete.png);
}

.log .icon.delete.person {
    background-image: url(../images/icons/log-delete-person.png);
}

( , , ..), ( ).

CSS, , UpperCase , lowerCamel . .

CSS, , :

• ,
• ... DOM/AJAX
• (, , , ..)
• ... , , . #Header a.icon.person

, . CSS, - , , : a) b) .

Answer 6

All work with classes is that you can use them several times. For CSS, specifically for a specific element, you should use id. As said, the smaller the CSS, the better.