Naming conventions for html / css + MVC?

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

+3
source share
6 answers

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

+2

, , . ( ).

- , .

0

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 {}
...
0

, . - , - , . Codeigniter - , .

, , . . test.php Test.

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

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

0

, 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) .

0
source

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.

0
source

Source: https://habr.com/ru/post/1755070/


All Articles