Tenho visto muitas introduções a frameworks CSS recentemente. Disse algo há alguns dias: “No meu campo de visão limitado, não vi nada que possa realmente ser chamado de framework CSS ~”. pode ser meu. O campo de visão é muito pequeno ou o mundo é muito grande. Ainda sinto que ainda há muitas coisas que não consigo ver.
Vejamos primeiro um conceito com o qual concordo:
A estrutura pode ser dividida em dois tipos: Caixa Branca e Caixa Preta.
Estruturas baseadas em herança são chamadas de estruturas de caixa branca. A chamada caixa branca tem visibilidade e os detalhes internos da implementação da classe pai herdada são conhecidos pela subclasse. Os desenvolvedores de aplicativos que utilizam estruturas de caixa branca desenvolvem sistemas derivando subclasses ou substituindo métodos membros de classes pai. A implementação de uma subclasse depende muito da implementação da classe pai, e esta dependência limita a flexibilidade e a integridade da reutilização. Mas a maneira de resolver essa limitação pode ser apenas herdar a classe pai abstrata, porque as classes abstratas basicamente não fornecem implementação concreta. A estrutura de caixa branca é um esqueleto de programa e as subclasses derivadas do usuário são acessórios desse esqueleto.
Uma estrutura baseada na montagem de componentes de objetos é uma estrutura de caixa preta. Os desenvolvedores de aplicativos obtêm a implementação do sistema classificando e montando objetos. Os usuários só precisam entender a interface externa do componente e não precisam entender a implementação interna específica. Além disso, o assembly é mais flexível que a herança e pode ser alterado dinamicamente. A herança é apenas um conceito estático de tempo de compilação.
Numa situação ideal, qualquer funcionalidade necessária pode ser obtida através da montagem de componentes existentes. Na verdade, os componentes disponíveis estão longe de satisfazer as necessidades. caixa branca e caixa preta serão utilizadas no desenvolvimento do sistema ao mesmo tempo. No entanto, as estruturas de caixa branca tendem a evoluir para estruturas de caixa preta, e as estruturas de caixa preta também são os objetivos ideais que o desenvolvimento de sistemas espera alcançar.
Vejamos os muitos frameworks CSS na Internet hoje (YUI é chamado de “YUI Library CSS Tools” em vez de “YUI CSS Frameworks”). Quantos deles são realmente escritos com o conceito de um framework e quantos deles. apenas defina as classes base de estilo. É claro que a compreensão que todos têm da estrutura pode não ser a mesma e você pode não concordar com o que eu digo.
Vamos falar sobre a estrutura CSS novamente. Não é que eu não reconheça a existência dessa coisa. Tenho tentado essas coisas há um ou dois anos. Para sites grandes, o desenvolvimento front-end requer uma solução. A estrutura é naturalmente a primeira escolha. Pena que está muito longe de mim e estou muito fraco T_T só preciso de duas coisas:
Algo para gerenciar o conteúdo abaixo
Classe/Componente
Obviamente, o primeiro ponto é que o CSS não consegue fazer isso, e o segundo ponto é que ele é muito fraco comparado a outras linguagens.
Quando eu estava trabalhando em um site de médio porte há cerca de um ano, para ter preguiça, pensei em modularizar o conteúdo e deixar os programadores montarem as páginas. A orientação geral é encapsular um bloco funcional após o outro. Os programadores só precisam usar o HTML e CSS correspondentes quando quiserem usar qual parte do conteúdo não deseja soletrar. não é necessário repetir o código. Olá a todos.
No mesmo site, é normal que blocos de conteúdo semelhantes sejam usados várias vezes. Isso também possibilita a modularização, como uma lista de imagens, uma lista de avatares de usuários ou uma lista de ícones de grupos. escrevê-lo? As mesmas palavras deveriam ser escritas assim?
.photoListUesr,.photoListGroup{ /*_*/ }
Isso não significa que seja impossível, mas e se de repente você quiser adicionar um semelhante neste momento, pode ser necessário ajustar o estilo. E eu? Tentei usar assim:
<div class="photoList UesrCt" />
<div class="photoList GroupCt" />
Nesse caso, separamos as expressões comuns desde o início, usamos .photoList como protótipo e tratamos dos detalhes por meio de classes adicionais. Há alguns dias, escrevi sobre programação XHTML e CSS orientada a objetos. Na verdade, escrevi apenas metade. A outra metade eram exemplos detalhados, mas não terminei porque tive que fazer muitos exemplos. o núcleo já foi escrito. ^^ Claro, isso também tem alguns problemas, ou seja, a definição do protótipo inicial deve ser muito cuidadosa, e tentar garantir que mesmo que seja revisado no futuro, pode não precisar ser revisado. modificado. Com CSS, basicamente um framework só cabe em um site. É claro que, se o site for grande o suficiente, faz sentido usá-lo dessa forma.
Quanto mais modulares o HTML e o CSS se tornam, mais fragmentados os arquivos se tornam e mais sério esse problema se torna. O HTML é fácil de manusear, pois o aplicativo eventualmente mesclará e produzirá uma cópia, mas o CSS geralmente é descartado e usado diretamente. Se no exemplo de agora, a forma de importar CSS para a página web é assim:
@importar url(/xxx/photoList.css);
@importar url(/xxx/UserCt.css);
@importar url(/xxx/GroupCt.css);
Você pode até considerar usar um programa para combinar páginas, mas é fácil de usar e proporcional ao número de solicitações. Geralmente, todo mundo vai optar por mesclar os arquivos manualmente. Embora o cérebro humano seja mais inteligente que um computador, em muitos casos o poder computacional do cérebro humano não é tão bom quanto o de um computador. Certa vez, tive a ideia de usar um programa do lado do servidor para lidar com o mecanismo de liberação de CSS. A orientação geral é analisar o uso de várias páginas de todo o site por meio de logs de acesso ao site e usar o programa para calcular quais usos públicos. precisa ser mesclado. A ordem (a ordem dos arquivos CSS afetará a prioridade), etc. Vários cálculos e saída compactada.
Infelizmente, um programa tão complexo pode ser adequado apenas para uma estação ou um grupo de estações da mesma série. Embora seja um pouco complicado de fazer, acredito que seja necessário usar esse método para sites em nível de portal. Claro, a premissa é que toda a equipe deve usar o mesmo padrão de design.
PS: O programa de publicação de CSS acima é apenas minha fantasia. Amigos interessados podem tentar. Se houver algum acidente, não serei responsável.
Claro, o que foi dito acima não pode ser chamado de Frameworks CSS, talvez só possa ser chamado de solução em nível de sistema. Afinal, CSS é apenas uma linguagem descritiva.
Ontem à noite, quando comi pato assado com Yueying, conversamos sobre isso e ele me perguntou se eu tinha uma solução front-end integrada. O mesmo problema será enfrentado quando o JS for componenteizado, e mecanismos de publicação semelhantes também deverão ser aplicáveis ao JS. Mas ainda não pensei em uma solução totalmente integrada. Talvez Yueying me dê pato assado mais algumas vezes e eu consiga descobrir.