Fullsix Blog

Ora aqui vai a revisão da estrutura e nomenclaturas para sites e css:

 

Assim, qualquer site deve começar sempre com esta estrutura de pastas:

 

- Html

                + images

                + swf

                + scripts

                + pdf

+ videos

+ sons

 

Nota: dependendo do projecto várias destas pastas podem ser omitidas quando não são necessárias (para projectos .net esta estrutura não se aplica: é defenida pelo server side mediante as necessidades).

 

Para a nomenclatura das imagens existe estes sufixos a ter em conta:

 

                bg_name            (backgrounds)

                pub_name         (banners publicitários)

txt_name           (texto)

bot_name          (botões)

icon_name         (icons)

sep_name          (separadores)

img_name          (fotos)
dummy_name (elementos gráficos que estão em vez de e que devem ser apagados no futuro)

 

Para os css, aqui vai o exemplo de como deve ser feitos as nomenclaturas de css da qual já falamos:

 

CSS:

 

.newsletter{ margin:6px; padding:6px;}

.newsletter h2{ padding:0px; margin:0px; color:#000000; font-size:14px; margin-bottom:5px;}

.newsletter .txt{ color:#000000; font-size:11px;}

.newsletter .email{}

.newsletter .email input{ font-size:11px; color:#555555; padding:0px; margin:0px; border: 1px solid #CCCCCC; vertical-align:middle; width:186px;}

.newsletter .email img{ vertical-align:middle;}

 

.events{ width:264px; height:115px; background:url(../images/bg_smalblue.gif) no-repeat left top; padding:6px; margin:6px;}

.events h3{ font-size:14px; font-weight:bold; color:#000000; padding:0px; margin:0px; margin-bottom:5px;}

.events ul{ list-style:none; margin:0px; padding:0px;}

.events li a{ font-size:11px; color:#000000; position:relative; display:block; text-decoration:none;}

.events li a:hover{ *text-decoration:underline;}

.events span{ font-weight:bold; color:#FFFFFF;text-decoration:none; cursor:pointer;}

.events span + span{ position:absolute; right:0px;}

.events .others{ margin-top:5px;}

 

HTML:

 

    <div class=”homeBoxNormal”>

 

      <div class=”newsletter”>

         <h2>NEWSLETTER</h2>

            <div class=”txt”>Receba toda a informa&ccedil;&atilde;o sobre padel, em 1&ordf; m&atilde;o:</div>

            <div class=”email”><input name=”" type=”text” />

            <img src=”images/bot_ok.gif” width=”28″ height=”15″ /></div>

        </div>

 

       <div class=”events”>

        <h3>PR&Oacute;XIMOS EVENTOS</h3>

          <div class=”list”>

            <ul>

               <li><a href=”#”><span>22-23 Set </span>5&ordf; Etapa do Circuito Nacional<span> [+]</span></a></li>

               <li><a href=”#”><span>05-07 out </span>Campeonato  Nacional<span> [+]</span></a></li>

               <li><a href=”#”><span>20-25 nov </span>Campeonato Europa<span> [+]</span></a></li>

               <li><a href=”#”><span>20-28 Dez </span>4&ordf; Etapa do Circuito Nacional<span> [+]</span></a></li>

             </ul>

            <div class=”others”><a href=”#”><img src=”images/bot_ver_todos.gif” /></a></div>

          </div>

        </div>

 

    </div>

 

Nota: como podem reparar a estrutura n é feita apartir da raiz “homeBoxNormal” por forma a permitir o uso da componente newsletter e eventos em qualque lado.

Ainda assim, apesar desta estrutura de css permitir o uso repetido do mesmo nome para classes, tentem não abusar do mesmo nome.
O dreamweaver não gosta muito disso e baralha-se um bocado apesar de nos browsers ficar tudo bem.

autor: João Da Silva

Tags: css, HTML

This entry was posted on Monday, September 8th, 2008 at 17:02 and is filed under HTML. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.