{"id":1231,"date":"2023-10-13T12:07:43","date_gmt":"2023-10-13T10:07:43","guid":{"rendered":"https:\/\/www.giral.do\/wp\/?p=1231"},"modified":"2023-10-13T12:07:43","modified_gmt":"2023-10-13T10:07:43","slug":"css-mais-facil","status":"publish","type":"post","link":"http:\/\/www.giral.do\/wp\/tecnologia\/css-mais-facil\/","title":{"rendered":"CSS mais f\u00e1cil"},"content":{"rendered":"\n

Damien Riehl \u00e9 um advogado especializado em tecnologia e tamb\u00e9m um m\u00fasico. E ele n\u00e3o concorda como os processos de viola\u00e7\u00e3o de direitos autorais, para ele m\u00fasica pode ser vista como matem\u00e1tica. E se voc\u00ea lembrar que h\u00e1 apenas 8 notas musicais, Damien teve a brilhante ideia de fazer um algoritmo que fizesse todas as combina\u00e7\u00f5es e colocou no dom\u00ednio p\u00fablico. Segundo ele, isto pode ajudar naqueles casos em que algu\u00e9m \u00e9 processado apenas porque usou uma combina\u00e7\u00e3o usada por outro, e a segunda pessoa nem sabia. Veja o faq em http:\/\/allthemusic.info\/<\/a> para entender melhor.<\/p>\n\n\n\n

N\u00e3o sou um advogado, nem estou defendendo a pirataria, o que me chamou a aten\u00e7\u00e3o foi a sacada de notar que h\u00e1 um espa\u00e7o finito de possibilidades. Acho que h\u00e1 um fascinio em poder dizer ‘aqui est\u00e1 tudo sobre o tema X’, pessoalmente foi o que me atraiu no mestrado. N\u00e3o vou ser arrogante de dizer que sei tudo sobre Design Thinking mas eu abordei meus estudos com este objetivo. E agora sei uma ou duas coisas a respeito \u2026<\/p>\n\n\n\n

Outro tema: Pense no design de uma p\u00e1gina HTML ou SPA, quantos modos diferentes h\u00e1 de faz\u00ea-la? Usamos CSS para controlar o que ser\u00e1 exibido. As cores s\u00e3o finitas, v\u00e3o de #000000 at\u00e9 #FFFFFF; as bordas s\u00e3o top-bottom-left-right; e por a\u00ed vai. Adam Wathan notou isto e desenvolveu o TailwindCSS. Com o TailWind, voc\u00ea escreve seu CSS sem sair da sua pagina HTML. Veja a diferen\u00e7a, antes, se eu queria que meu texto fosse azul e negrito, eu faria isto:<\/p>\n\n\n\n

style.css<\/strong><\/p>\n\n\n\n

 .info{\n        color: blue;\n        font-weight: bold;\n    }<\/code><\/code><\/pre>\n\n\n\n
index.html<\/strong><\/p>\n\n\n\n
<p class=\"info\">\n    Lorem Ipsum\n<\/p><\/code><\/pre>\n\n\n\n
E voil\u00e0, texto azul e negrito. O TailWindCSS permite que voc\u00ea escreva diretamente e ele tem uma biblioteca com centenas e centenas de possibilidades. Assim que voc\u00ea usa no seu html ele gera o CSS automaticamente. Este \u00e9 um detalhe, uma aplicativo roda no seu terminal e varre as suas p\u00e1ginas para saber o que gerar:<\/p>\n\n\n\n
index.html<\/strong><\/p>\n\n\n\n
<p class=\"text-blue font-bold\">\n    Lorem Ipsum\n<\/p><\/code><\/pre>\n\n\n\n
ou texto bem grande, negrito, sublinhado, azul-celeste e centralizado na p\u00e1gina:<\/p>\n\n\n\n
<p class=\"text-3xl font-bold underline text-sky-400 text-center\">\n    Lorem Ipsum\n<\/p><\/code><\/pre>\n\n\n\n
UnoCSS leva a ideia adiante e elimina completamente o arquivo css. No UnoCSS h\u00e1 um script que analisa as suas p\u00e1ginas em runtime e gera as classes para voc\u00ea. E n\u0101o \u00e9 necess\u00e1rio um aplicativo rodando em background. M\u00e1gico! Note que o modo de escrever \u00e9 exatamente igual ao TailWindCSS.<\/p>\n\n\n\n
index.html<\/strong><\/p>\n\n\n\n
<p class=\"text-blue font-bold\">\n    Lorem Ipsum\n<\/p><\/code><\/pre>\n\n\n\n
Tenho usado muito UnoCSS. Mas tenho minhas cr\u00edticas, o grande n\u00famero de classes pode tornar o c\u00f3digo HTML verboso, e \u00e9 um fato, seu HTML fica dif\u00edcil de entender. E o CSS gerado pelo TailWindCSS \u00e9 leg\u00edvel apenas pelos desenvolvedores do … TailWind  \ud83d\ude00.<\/p>\n\n\n\n
Al\u00e9m disso, a depend\u00eancia do framework em classes utilit\u00e1rias pode levar a uma falta de consist\u00eancia no design em todo o site, j\u00e1 que diferentes desenvolvedores podem usar classes diferentes para alcan\u00e7ar efeitos semelhantes. E uma vez que n\u00e3o h\u00e1 um arquivo CSS mantido pelo time, a necessidade de documentar as escolhas de estilo \u00e9 essential.<\/p>\n\n\n\n
Ainda assim, a praticidade parece para mim mostrar que frameworks assim ser\u00e3o cada vez mais populares.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Damien Riehl \u00e9 um advogado especializado em tecnologia e tamb\u00e9m um m\u00fasico. E ele n\u00e3o concorda como os processos de viola\u00e7\u00e3o de direitos autorais, para ele m\u00fasica pode ser vista como matem\u00e1tica. E se voc\u00ea lembrar que h\u00e1 apenas 8 … Continue lendo →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,51],"tags":[],"class_list":["post-1231","post","type-post","status-publish","format-standard","hentry","category-tecnologia","category-ux"],"_links":{"self":[{"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/posts\/1231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/comments?post=1231"}],"version-history":[{"count":2,"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/posts\/1231\/revisions"}],"predecessor-version":[{"id":1233,"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/posts\/1231\/revisions\/1233"}],"wp:attachment":[{"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/media?parent=1231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/categories?post=1231"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.giral.do\/wp\/wp-json\/wp\/v2\/tags?post=1231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}