{"id":2448,"date":"2013-12-16T19:22:23","date_gmt":"2013-12-16T22:22:23","guid":{"rendered":"http:\/\/blogimpacta.com.br\/?p=2448"},"modified":"2013-12-16T19:22:23","modified_gmt":"2013-12-16T22:22:23","slug":"5-razoes-para-considerar-o-css-a-linguagem-de-programacao-mais-complexa-de-todas","status":"publish","type":"post","link":"https:\/\/www.impacta.com.br\/blog\/5-razoes-para-considerar-o-css-a-linguagem-de-programacao-mais-complexa-de-todas\/","title":{"rendered":"CSS: A linguagem de programa\u00e7\u00e3o mais complexa de todas!"},"content":{"rendered":"

Um website pode ser constru\u00eddo com base em diversas linguagens web como HTML, CSS, JavaScript e PHP, por exemplo. <\/span>
\nNo meio da programa\u00e7\u00e3o web, costuma-se concordar que entre todas as linguagens supracitadas e diversas outras, o CSS \u00e9 a mais simples. Com ele, \u00e9 poss\u00edvel definir o layout, as cores, dimens\u00f5es e tipografia dos websites de uma maneira simplificada, direta e objetiva.<\/span>
\nEntretanto, voc\u00ea poder\u00e1 se surpreender ao saber que, \u00e0 parte das opini\u00f5es de programadores profissionais, quando avaliados determinados aspectos, o\u00a0CSS pode ser paradoxalmente a linguagem de programa\u00e7\u00e3o mais complexa de todas.<\/span>
\nO Cascading Style Sheets<\/strong> \u2013 mais conhecido por sua sigla CSS<\/strong> \u2013 programa documentos, separando formato e conte\u00fado por meio de links para p\u00e1ginas que contenham os estilos e os atrelam \u00e0 todas as p\u00e1ginas de um portal. <\/span>
\nDiferentemente de outras linguagens, o CSS trabalha como uma matriz onde altera\u00e7\u00f5es realizadas valham para todas as p\u00e1ginas dela dependentes.<\/span>
\nE \u00e9 exatamente este diferencial positivo que, sob outro prisma, pode torn\u00e1-lo t\u00e3o complexo. Confira a seguir cinco raz\u00f5es<\/strong> para considerar o CSS a linguagem de programa\u00e7\u00e3o mais complicada de todas:<\/span>
\n\u00a0 \u00a01 – N\u00e3o h\u00e1 report de erro<\/strong><\/span>
\nTodas as linguagens web seguem regras espec\u00edficas de escrita codificada. No caso do CSS, por exemplo, inicia-se com o nome do seletor (geralmente classe, id, seletor de atributo, entre outros), seguido por uma abertura de chave e uma declara\u00e7\u00e3o de estilo dentro da mesma, terminando cada linha com o sinal de ponto e v\u00edrgula. Por exemplo:<\/span><\/p>\n

\n
    \n
  1. .class\u00a0{<\/span><\/li>\n
  2. \u00a0\u00a0\u00a0\u00a0color<\/b>:\u00a0#fff;<\/span><\/li>\n
  3. \u00a0\u00a0\u00a0\u00a0background-color<\/b>:\u00a0#000;<\/span><\/li>\n
  4. }<\/span><\/li>\n<\/ol>\n<\/div>\n

    Na maioria das linguagens web, essas regras s\u00e3o estritamente precisas, de modo que, havendo erros, o programador receber\u00e1 algo como uma \u201cmensagemde erros\u201d informando detalhadamente sobre eles. N\u00e3o \u00e9 o caso do CSS. O CSS n\u00e3o aponta erros.<\/span>
    \n Caso voc\u00ea acidentalmente remova ou esque\u00e7a de algum elemento como o \u00a0ponto e v\u00edrgula ou a chave, por exemplo, seu layout sair\u00e1 errado e ponto final.<\/span>
    \n No PHP, por exemplo, voc\u00ea seria informado detalhadamente sobre cada erro; qual foi o erro, em que etapa ele ocorreu, etc, podendo consert\u00e1-lo mais rapidamente.<\/span>
    \n\u00a0 \u00a02 – N\u00e3o conte com as vari\u00e1veis<\/strong><\/span>
    \nJavaScript e PHP permitem que voc\u00ea armazene valores em uma vari\u00e1vel. Vari\u00e1veis s\u00e3o elementos alter\u00e1veis com facilidade no processo da programa\u00e7\u00e3o e ajudam \u2013 e muito \u2013 a ganhar tempo, tornando os c\u00f3digos facilmente manuse\u00e1veis. <\/span>
    \nCaso haja necessidade de altera\u00e7\u00e3o, basta trocar os valores de uma vari\u00e1vel ao inv\u00e9s de localizar a informa\u00e7\u00e3o necess\u00e1ria em meio \u00e0s diversas linhas.<\/span>
    \nInfelizmente, no CSS n\u00e3o h\u00e1 vari\u00e1veis. Pelo menos n\u00e3o aplic\u00e1veis de maneira pr\u00e1tica e simplificada como nas outras linguagens.<\/span>
    \nComo exemplo, verifique como web designers costumam proceder para gerenciar esquemas de cor:<\/span><\/p>\n

    \n
      \n
    1. \/*=======\u00a0color\u00a0scheme\u00a0==========*\/<\/span><\/strong><\/li>\n
    2. primary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#000<\/span><\/strong><\/li>\n
    3. secondary\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#ccc<\/span><\/strong><\/li>\n
    4. text\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#333<\/span><\/strong><\/li>\n
    5. hover\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0#aaa<\/span><\/strong><\/li>\n<\/ol>\n<\/div>\n

      Esta abordagem, no entanto, requer uma disciplina e um cuidado extra em sua implementa\u00e7\u00e3o, uma vez que se pode acidentalmente deletar um elemento que n\u00e3o deveria ser substitu\u00eddo.<\/span>
      \n\u00a0 \u00a03 – A compatibilidade de browsers<\/strong><\/span>
      \nAtualmente est\u00e1 em desenvolvimento a vers\u00e3o CSS3, e cada vez mais, a compatibilidade de browser \u00e9 um dos maiores problemas do CSS em si. <\/span>
      \nApesar do padr\u00e3o W3C<\/strong>, cada browser implementa especifica\u00e7\u00f5es de CSS diferentemente, e existem, inclusive, websites especializados na verifica\u00e7\u00e3o de como certos atributos do CSS seriam suportados em determinada vers\u00e3o de um browser.<\/span>
      \nQuando se requer suporte a browsers mais antigos (como IE6 e IE7) \u2013 geralmente por demanda do cliente \u2013 pode-se acabar tendo que criar arquivos m\u00faltiplos e disp\u00f4-los atrav\u00e9s de estruturas condicionais, para somente depois realizar um monte de altera\u00e7\u00f5es que equiparem a visualiza\u00e7\u00e3o do site em CSS \u00e0 de browsers mais atuais. <\/span>
      \nUma verdadeira preocupa\u00e7\u00e3o extra que costuma n\u00e3o existir em outras linguagens.<\/span>
      \n\u00a0 \u00a04 – Especifica\u00e7\u00f5es do CSS<\/strong><\/span>
      \nSeletores de CSS t\u00eam n\u00edveis diferentes de especifica\u00e7\u00e3o. Por exemplo:<\/span><\/p>\n

      \n
        \n
      1. p\u00a0{<\/span><\/li>\n
      2. \u00a0\u00a0\u00a0\u00a0color<\/b>:\u00a0#000;<\/span><\/li>\n
      3. }<\/span><\/li>\n
      4. p\u00a0{<\/span><\/li>\n
      5. \u00a0\u00a0\u00a0\u00a0color<\/b>:\u00a0#333;<\/span><\/li>\n
      6. }<\/span><\/li>\n<\/ol>\n<\/div>\n

        Quando dois seletores de especifica\u00e7\u00f5es iguais cont\u00eam os mesmos estilos, ou referem-se \u00e0s mesmas coisas, conforme demonstrado acima, o que vem por \u00faltimo sobrescreve o anterior.<\/span>
        \nMas quando adicionamos seletores de classe, como \u201c.paragraph\u201d , por exemplo:<\/span><\/p>\n

        \n
          \n
        1. p.paragraph\u00a0{<\/span><\/li>\n
        2. \u00a0\u00a0\u00a0\u00a0color<\/b>:\u00a0#000;<\/span><\/li>\n
        3. }<\/span><\/li>\n
        4. p\u00a0{<\/span><\/li>\n
        5. \u00a0\u00a0\u00a0\u00a0color<\/b>:\u00a0#333;<\/span><\/li>\n
        6. }<\/span><\/li>\n<\/ol>\n<\/div>\n

          independente de sua posi\u00e7\u00e3o, o elemento p<\/em> do HTML que estiver com o valor do atributo classe como \u201c.paragraph\u201d ter\u00e1 #000 color, por ser mais espec\u00edfico.<\/span>
          \nEspecifica\u00e7\u00f5es no CSS s\u00e3o t\u00e3o espec\u00edficas quanto confusas. \u00c9 necess\u00e1rio aten\u00e7\u00e3o ao definir regras de estilo. Pode haver seletores com especificidades mais altas que sobrescrevam seletores menos espec\u00edficos, deixando voc\u00ea buscando o elemento respons\u00e1vel por um bom tempo at\u00e9 localiz\u00e1-lo.<\/span>
          \n\u00a0 \u00a05 – O cliente<\/strong><\/span>
          \nComo citamos anteriormente, o CSS define o layout, cores e dimens\u00f5es de um website e aproxima-se bastante da visualiza\u00e7\u00e3o final do design do mesmo. Esse \u00e9 um dos maiores diferenciais desta linguagem. E \u00e9 exatamente este um de seus maiores problemas.\u00a0<\/span>
          \nObviamente, design \u00e9 sempre algo de caracter\u00edsticas subjetivas e que depende muito do gosto pessoal de cada um. <\/span>
          \nPor esse lado, seu cliente pode ter uma perspectiva bem diferente de voc\u00ea quanto ao visual do site, e pode acabar por inferniz\u00e1-lo com solicita\u00e7\u00f5es espec\u00edficas e dif\u00edceis de serem atendidas em uma programa\u00e7\u00e3o CSS; discretas altera\u00e7\u00f5es de cor, espessuras, tra\u00e7os, etc. Por trabalhar com links como uma matriz, atender o gosto pessoal e pontual de seu cliente pode ser uma grande dor de cabe\u00e7a na programa\u00e7\u00e3o CSS.<\/span>
          \nResumindo, todos sabemos que n\u00e3o existe linguagem web perfeita, por\u00e9m linguagens adequadas a cada projeto, website e documento. Algo perfeitamente simples de ser programado em uma determinada linguagem, pode ser simplesmente imposs\u00edvel ao utilizar outras, e o uso de cada uma varia conforme a demanda. <\/span>
          \nO CSS pode ser considerada, sem sombra de d\u00favidas, relativamente f\u00e1cil de aprender, mas \u00e9 necess\u00e1rio que o programador seja disciplinado e atento aos detalhes, para usufruir o m\u00e1ximo desta linguagem e torn\u00e1-la o mais male\u00e1vel poss\u00edvel.<\/span>
          \nEsse conte\u00fado foi adaptado do artigo dispon\u00edvel em Hongkiat.com<\/a><\/i>.<\/span>
          \nColaborou nesse artigo:<\/em>           Wilson Divino<\/a><\/strong>.<\/span>
          \n<\/strong>
          \nCurtiu o post? Deixe seu coment\u00e1rio nos contando se o conte\u00fado foi relevante pra voc\u00ea ou caso tenha ficado alguma d\u00favida!<\/span><\/p>\n

          <\/i>Love<\/span>0<\/span><\/span><\/a> <\/i> <\/i>