Quais são suas dicas para as melhores práticas para a estrutura de aplicações web? [fechadas]

StackOverflow https://stackoverflow.com/questions/591328

Pergunta

Eu faço um monte de aplicativos personalizados no trabalho. Estou tentando definir alguns padrões para novas aplicações. Algo um pouco como elementos.

CSS : Como você organiza as folhas de estilo? Devo ter uma folha de estilo de base para todo o site e uma para cada página individual para personalizações? Devo ter outro para estilos de impressão? Ouvi dizer que a ligação mais arquivos leva mais tempo para o navegador para recuperá-los. (Mais objetos por página ... também um problema com lotes de arquivos JavaScript ou imagens) ... Quantos é é demais? Você fortemente comentar o seu CSS? Fornecer qualquer estrutura aninhada? Alfabetizar dentro de elementos? Preciso de um reset? E sobre as importações? E tipografia?

Javascript : Basicamente a mesma pergunta. arquivos javascript ... Devo incluir uma ou duas bibliotecas agradáveis ??(JQuery e Prototype, por exemplo) e, em seguida, ter outro incluído para cada página? Agora estou de repente incluindo 5 ou 6 CSS e JS arquivos ...

Estrutura Diretório : Como organizar um site? Atualmente, eu uso algo como 

/CSS          ... For CSS files
/JS           ... For javascript files
/INC          ... For private code includes
/ASSETS/IMG   ... For images
/ASSETS/AU    ... For audio
/ASSETS/SWF   ... For Flash

Além disso, quaisquer outras dicas seria bem-vinda. Thanks !!

Foi útil?

Solução

Eu deveria ter uma folha de estilo de base para todo o site e uma para cada página individual para personalizações?

Ser pragmático. Se você tem regras poucos o suficiente para que você pode organizá-los todos em um arquivo e manter um descuido do que faz o quê, fazer isso. Se você tem um número significativo de regras que se aplicam somente a certas secções ou páginas individuais em seu site, por todos os meios quebrar-los em suas próprias sub-folhas de estilo, mas não se sentem a necessidade de criar uma folha de estilo separada para cada página mesmo quando ele contém apenas duas regras. Adicionar uma classe ou ID específico da página para para que você possa escolher páginas simples de uma folha de estilo compartilhada deve precisar.

A separação de estilos em folhas de estilo é para seu benefício como um autor, por isso o que você encontra mais fácil de gerir. Para um site complicado que provavelmente vai ser mais de um arquivo CSS, mas não vai ser dezenas.

Eu deveria ter outro para estilos de impressão?

Geralmente sim. Enquanto você pode incorporar estilos de impressão dentro de outro estilo usando uma regra @media, este tem sido, tradicionalmente, de buggy, assim, colocar a mídia na tag é geralmente mais fácil. Em qualquer caso de estilo de impressão são muitas vezes tão diferentes dos seus homólogos de tela que ele só faz sentido para manter suas regras separadas.

Eu ouvi que a ligação mais arquivos leva mais tempo para o navegador para recuperá-los.

Sim, mas esse efeito é muitas vezes exagerada. HTTP / 1.1 reduz a latência por solicitação, mantendo conexões entre o cliente eo servidor vivo, que é uma atenuação forte.

Como muitos é é demais?

O suficiente para que você seja extremamente improvável que tenha que muitas folhas de estilo. Scripts pode ser um problema se você estiver usando o tipo de estrutura que exige um arquivo de script por classe, mas caso contrário são geralmente OK. É mais comumente problemática com lotes de pequenas imagens.

Você fortemente comentar o seu CSS?

Luz comentando geralmente deve ser suficiente. estilo de regra declarativa do CSS não costuma ficar complicado o suficiente para precisar o em profundidade código explicações pode exigir. Em particular, porém, documento nada intuitivo como hacks específicas do navegador.

alfabetizar dentro elementos?

Não, a menos que torna mais fácil para você gerenciar. Normalmente ele não iria, você tentaria regras semelhantes grupo ou regras aplicáveis ??aos grupos semelhantes de elementos.

Preciso de um reset?

A redefinição completa? Não se você sabe o que está fazendo e pode selecionar os padrões problemáticos específicos que pretende repor.

Devo incluir uma ou duas bibliotecas agradáveis ??(jQuery e Prototype, por exemplo)

Não inclua mais do que um quadro, a menos que seja absolutamente necessário.

e, em seguida, ter outro incluído para cada página?

Se cada página tem determinado comportamento personalizado que você poderia. Mas isso não costuma acontecer. Se você fizer de aperfeiçoamento progressivo de comportamento de scripts que se ligam a ex. nomes de classe, você pode incluir o script para cada comportamento em cada página que usa-lo, em seguida, deixá-lo encontrar os elementos para se ligar automaticamente.

Estrutura Directory:? Como organizar um site

Pessoalmente, para minhas aplicações Python / WSGI: 

appfolder
    application.py       - main WSGI entry point and control/configuration script
    data                 - run-time writable application file store
        private          - files not available through the web server
        public           - mounted as a virtual directory on the web server
    logs                 - access, error, application log files
    system               - all the static application code and data
        htdocs           - web server root folder
            file         - static servable files
            img          - static images
            script       - JavaScript
            style        - CSS
        lib              - Python modules used by site
            appmodule    - main application code package
        templates        - HTML page templates
            mail         - mail text templates

É importante para mim manter os ‘dados’ em um lugar separado (com permissões separadas) para a aplicação no ‘sistema’. Você precisa ser capaz de trocar a pasta ‘sistema’ para atualizar o aplicativo, sem ter que se preocupar que não são carregadas imagens em htdocs / img você tem que se preocupar em manter.

Outras dicas

CSS: Eu só uso um estilo. Eu continuo acrescentando ao fundo como eu ir junto. Eu costumo colocar um comentário antes de cada conjunto específico páginas de regras. Ctrl + F se eu precisar editar algo.

Javascript: Geralmente incluem apenas uma biblioteca, e talvez alguns plugins. Usado para jogar qualquer JS específicas páginas diretamente no cabeçalho da página, mas acho que é um pouco feio e mixes 'comportamento' com dados. Então, eu estou começando um novo paradigma -

MVCB - Model, View, Controller, Comportamento. MVC é ótimo para aplicativos de desktop com interfaces de usuário em vez de estática, mas quando você adicionar lotes de JS Eu acho que apela para uma camada extra de abstração.

Assim, minha estrutura arquivo original: 

index.php
app
    config
        bootstrap.php               -- code that needs to run before anything else, or functions that don't really fit elsewhere
        core.php                    -- timezone, database, and misc settings
        routes.php                  -- default routes
    layouts                         -- layout/template files
        flash                       -- layouts for one-time popup messages
    objects                         -- all files are stored in the same folder as the controller to keep directories
                                            smaller and ease reusability
        object
            controller.php
            model.php
            routes.php              -- object-specific routes to override default routes
            behaviours              -- page-specific javascript files
                action.js           -- included automatically on that page if this file exists
            views
                action.php          -- the view for this action
    public                          -- static media files, sometimes called "assets"
        favicon.ico
        xrds.xml
        css
        img
        js
        uploads         
core
    app.php                         -- initializes stuff
    controller.php                  -- default controller
    dispatcher.php                  -- includes everything and calls all the appropriate functions
    model.php                       -- default model that all other models inherit from
    components                      -- helper functions to used in controllers
    datasources                     -- mysql, oracle, flat-file...
    helpers                         -- functions to be used in views and layouts
    structures                      -- model helpers such as tree or polymorphic behaviours
    utils                           -- functions that are useful everywhere
libs                                -- 3rd party libs

.htaccess 

Options -Indexes 

RewriteEngine On

RewriteCond %{REQUEST_URI} !^/app/public/
RewriteCond %{DOCUMENT_ROOT}/app/public%{REQUEST_URI} -f
RewriteRule .* /app/public/$0 [L]

RewriteCond %{REQUEST_URI} !^/app/objects/
RewriteRule ^([^/]+)/(.+\.js)$ /app/objects/$1/behaviours/$2 [L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* /index.php?url=$0 [L,QSA]

Eu afixei minha estrutura de diretório e comentários em outro segmento, mas é aplicável aqui também!

Eu tenho usado a seguinte configuração de um tempo agora com grandes resultados:

  • / site: Este é o lugar onde meu site de trabalho real vai viver. Vou instalar a minha CMS ou plataforma nesse diretório após os modelos são criados.

    • .htaccess (ajustes básicos eu costumo encontrar-me permitindo qualquer maneira)
    • robots.txt (para que eu não esqueça de desabilitar itens como / admin depois)

  • / fonte: Contém qualquer comps, notas, documentos, especificações, etc

    • .

  • / templates: Inicie aqui! Criar todos os modelos estáticos que eventualmente precisam ser portado para o CMS ou quadro de / site.

    • / _ comportamento
      • global.js (site-specific código; pode ser dividido em vários arquivos, conforme necessário)

    • / _ mídia: imagens, arquivos para download, etc. organizadas como necessário

    • / _ estilo: Eu prefiro o desenvolvimento CSS modular para que eu normalmente acabar com muitos estilo para cada seção exclusiva do site. Esta é limpa muito com Blender - eu recomendo esta ferramenta!

      • print.css (este, eventualmente, fica misturado, por isso uso @media imprimir)
      • reset.css ( de Eric Meyer )
      • screen.css (para a tela @media, handheld)
      • módulos adicionais, conforme necessário

    • / _ fornecedor: todo o código do 3o partido (. JQuery, shadowbox, etc)

    • Blendfile.yaml (para Blender; veja acima)

    • template.html (modelo básico de partida, pode ser copiado e renomeado para cada modelo único)

  • / testes: selênio testes de unidade

Apenas certifique-se que você não use letras maiúsculas para as pastas. Pode mordê-lo quando você desenvolve em janelas e implantar em um servidor linux.

Faça o seu melhor para ter uma folha de estilo. Ligando folhas de estilo individuais para páginas individuais derrota a finalidade.

Você pode herdar outras folhas de estilo em seu css, incluindo as seguintes linhas no topo da folha 

@import url('blueprint/screen.css');
@import url('blueprint/styles.css');

Neste caso eu estou herdando os estilos projeto css em seguida, adicionando meus estilos personalizados abaixo disso.

Em termos de JS bibliotecas prefiro link de 3 arquivos.

A Biblioteca, uma página com todos os plugins, e, finalmente, o código da página.

Para estrutura de diretórios que geralmente têm o seguinte:

/ _ css / _images / _scripts arquivos

mas recentemente eu comecei a colocar tudo usado para tornar o site olhar / trabalho da maneira que eu quero que ele em um diretório / _Presentation ... então qualquer coisa adicionais como imagens para posts etc iria em / images

Espero que isso ajude.

Eu sempre tento manter o navegador de ter que carregar e interpretar as regras CSS e código JS que não é usado no HTML em questão. Concordo com @bobince que você só deve quebrar estilos e scripts de uma página em um arquivo separado se for necessário para a organização, mas se o seu site é muito grande em tudo, você vai chegar a esse ponto.

No entanto uma vez que locais eu só modelo de construção com base, eu estou começando a me perguntar por que eu conectar-se a arquivos externos em tudo. Por exemplo, se eu tiver um modelo base as coisas que eu colocar na cabeça daquele modelo será aplicado a todas as páginas no meu site. Então por que não basta colocar meus estilos e scripts lá?

Duas razões vêm à mente. Primeiro, o navegador pode armazenar em cache o arquivo externo e reutilizá-lo em todas as páginas que inclui-lo sem ter que carregar tudo de novo. Segundo os designers podem não ser tão confortável em torno de picar em seus modelos de como eles estão mexendo com arquivos CSS simples.

Isso é tudo muito bem para estilos globais que se aplicam a cada página em seu site, mas que sobre aqueles one-off páginas que têm algum estilo que não é compartilhado em outro lugar? Se você adicionou esse estilo para um arquivo externo globalmente aplicado você aumentar o tempo de carga inicial de seu site apenas para ter um estilo que só é usado em uma página. Além disso, quando você voltar para aquela meses de arquivo mais tarde você vai provavelmente ter esquecido o que essas regras foram mesmo para.

Eu sugiro que qualquer regra de estilo que não é expressa em cada página deve ser colocado em tags <style> dentro do sub-modelo que torna o HTML a regra se aplica. Isto irá mover a carga ea complexidade do estilo global para a página real onde são necessários os estilos, e dar as regras de contexto para que eles possam ser mantidos no futuro. Se isso assusta o designer eles não precisam estar escrevendo CSS de qualquer maneira. Basta dizer-lhes ficar com Photoshop e deixá-lo fazer o trabalho big-boy.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top