Una resposta a "Com es pot fer bé amb CSS"

Consell: es fa pràctica, però també una comprensió de la imatge en general.

Probablement heu sentit a parlar de Quora, és una bona plataforma per obtenir i compartir coneixement. Hi ha centenars de categories actives on podeu demanar i respondre qualsevol cosa que us vingui al cap.

Una de les preguntes més freqüents que veig és la gran imatge. Si bé el tipus de pregunta-resposta del concepte és similar al de StackOverflow, el tipus de preguntes i respostes és diferent.

Les bones preguntes i, més concretament, les respostes de Quora no són "Com puc mantenir el fons en desplaçar-me" o "Com puc establir sanefes suaus per al meu botó". No m'equivoquis aquí, hi ha preguntes com aquesta, però no són molt valuoses.

Tot i això, els temes "Com puc sortir bé ràpidament?" Són interessants. O "Com organitzo el meu codi?". Un tipus de pregunta que no és tan benvinguda a StackOverflow com probablement ho saps perquè no és prou específica.

I aquest és el meu objectiu aquí: respondre a la simple pregunta "Com ser bo". No entraré en detalls tècnics, ja que aquests no són importants.

Comprendre els conceptes

És important. Captura la imatge més gran.

Probablement sabeu quin és el color de fons, potser sabreu què fa transformX, float, flexbox i grid. Podeu llegir sobre com utilitzar-lo i implementar-lo. Aquesta no és la part difícil. (+ Google hi és aquí per ajudar-vos.)

Però la majoria de la gent lluita sobre com està tot connectat. Per què es prenen algunes decisions i per què a la gent li encanta inventar els seus propis marcs i convencions de denominació.

Heu d’entendre que la manera de començar defineix més o menys l’estructura general del projecte. Per aquest motiu, heu d’assegurar-vos d’entendre els problemes potencials i com resoldre’ls.

Comencem per com ancorar correctament els fonaments bàsics.

Hi ha moltes propietats CSS. No els heu de memoritzar tots. La pàgina en si es diu "referència". Si no esteu a l'escola, ningú no us demanarà que poseu el nom de tots els paràmetres que podeu configurar al vostre full d'estil.

Però els recordareu després d’utilitzar-los infinitat de vegades. Si no esteu segur d’utilitzar alguna cosa: Google. Després escriviu-lo vosaltres mateixos, jugueu amb la configuració i vegeu el resultat.

Després d’uns mesos de treball dur, serà com escriure a la vostra llengua materna.

Això és important perquè sovint heu d’entregar ràpidament. És el que el gestor de projectes / directiu et demana. No heu d’estar buscant propietats bàsiques durant molt de temps.

Si coneixeu la majoria de propietats, també podeu millorar significativament la depuració. Saber com funciona cada propietat i si existeix us estalviarà molt de temps. Per això, els desenvolupadors experimentats poden solucionar molts problemes en pocs minuts.

https://xkcd.com/1350/

Cal escriure molt de codi

No hi ha manera al seu voltant. És el mateix amb tot a la vida, cal invertir molt de temps. Aquesta és una de les principals qüestions que veig quan la gent pregunta com millorar.

Què exactament escriure?

Si treballes en una agència o com a autònom, és probable que tinguis alguna cosa a fer. Si no, aquí teniu alguns consells:

Mireu com ho fan els grans

Si és el primer, és probable que tingueu molt de temps. I està bé, cosa que significa que pots fer el que vulguis.

I això se sent molt bé, molts envejaran.

Si és així, feu el següent: Vés a un lloc web que admireu. Punts de bonificació si hi ha molt trànsit. Comenceu per inspeccionar els elements i vegeu com els enginyers van implementar els components / dissenys específics.

Algunes instruccions sobre què cal cercar:

  • Heu utilitzat una convenció de nomenament determinada? Empreses com Airbnb, BBC i altres disposen de pautes de codi públic que podeu cercar.
  • Sobreescriviu molts codis? Consulteu quantes propietats són anul·lades per una classe en concret. Com menys, millor, mireu com ho van fer.
  • Com es va aconseguir realment alguna cosa? El text normal a l'esquerra i una imatge a la dreta poden ser molt difícils si la imatge es col·loca fora del contenidor del lloc, s'adhereix a la part inferior de la secció i es superposa a la part superior mentre el text està centrat verticalment i completament. és que reacciona.
  • Busqueu la diferència entre el vostre codi i el vostre. Fes servir més banyistes, més posicionament, més hacks? És molt probable que el que feu cada dia sigui molt més fàcil d’escriure.

Però tot és avorrit. No pots ser bo si només llegeixis, has de fer alguna cosa. I ho podeu fer cada vegada:

A continuació, intenta fer-ho tu mateix

Per exemple, obriu el dribbble. Hi ha tants dissenys fantàstics! Què fas amb ells? Implementa-ho. N’hi ha prou amb triar i intentar que tot sigui perfecte a totes les pantalles.

Per què? Perquè es veu bé i et sents fantàstic quan veus com funciona.

No l'utilitzeu com si fos el vostre propi disseny, no serà fantàstic. Guardeu-lo al vostre entorn de desenvolupador local o escriviu-lo al dissenyador si voleu fer alguna cosa.

Podeu trobar-lo a: https://dribbble.com/shots/3466131-Prism-Web-Theme-Template-designerbundle-com

A continuació, escolliu-ne un de dissenyador que no agradi als desenvolupadors. Un en què tot s’encaixa per tot arreu, on la graella és una paraula estrangera que descriu el pes d’una balena en plàtans i la consistència del color, és un terme utilitzat pels hipsters.

Per què? Perquè és difícil. Pensareu molt més sobre com organitzar els vostres marcs i estils. Proveu a que el píxel sigui perfecte! Punts de bonificació per a l’animació.

O si també ets dissenyador, utilitza els teus propis dissenys per codificar-los. També és un gran exercici. Això ho vaig fer quan vaig redissenyar la pantalla de selecció de Champions Legends de fa uns anys.

Completada en menys de dues hores, codificada en temps real en streaming en aproximadament 6 hores.

Podeu veure la versió implementada aquí. No respon perquè no formava part del pla original. També podeu veure un lapse de temps de tot el procés.

Comproveu el vostre codi

No es tracta només de la quantitat de treball, sinó també de la qualitat. Comproveu el vostre codi antic i cerqueu possibles millores.

Què us va impulsar a reescriure algunes parts? Què t’ha fet por! És important afegir-lo? Cal fer front a les consultes de mitjans? Heu escrit 4-5 nivells de selectors profunds?

Hi ha moltes bones pràctiques a buscar. Aquí en són alguns:

  1. 20 protips per escriure CSS moderns
  2. Convencions de denominació CSS ​​modulars
  3. O aquesta enorme directriu per a gairebé tot CSS.

Obtenir millor significa treballar més ràpid, de manera més eficaç i amb menys errors. Hauríeu d’intentar crear la vostra pàgina des del primer moment sense haver de reescriure, editar o eliminar cap part del codi.

Hauríeu de planificar-ho des del primer moment.

Com funcionaran els components? Què nidifica, què hereta els estils?

Has d’aprendre a planificar bé

És crucial. Quan mireu els models, prototips o dissenys proporcionats, haureu de planificar la vostra disposició i estructura de marca des del primer moment.

Quins són els elements, on s’utilitzen diverses vegades? Es diferencien d’alguna manera? Es diferencien per les mateixes regles?

Tot això us indica quins tipus de modificadors necessiteu, com estructurar el vostre marcador per tal que pugueu reutilitzar el màxim possible.

Tingueu en compte les seccions

Aquesta planificació us estalvia temps i diners després. Com més creix el projecte, més important és tenir un bon fonament. Això no s’aprèn en petits projectes.

A menys que estiguis d’acord amb tenir problemes per mantenir una base de codis més gran en la qual treballa molta gent, hauríeu d’examinar l’abast complet del projecte i planificar adequadament com estructurar tot el projecte.

Per regular-ne la majoria, altres desenvolupadors han desenvolupat convencions de denominació. Un conjunt de regles per anomenar els vostres components, els seus fills, els modificadors, les utilitats, etc.

I cadascun d’ells és útil per a projectes diferents. Tanmateix, si coneixeu prou bé l’abast i les limitacions, podeu triar el més adequat per al vostre projecte.

  • Les convencions de denominació modulars del bloc sass també s'apliquen aquí
  • Una introducció al CSS orientat a objectes (OOCSS)
  • SMACSS
  • BEM
Com se sent lluitar contra el CSS quan no s’organitza res. La sobreescriure, canviar, canviar i afegir cada cop més propietats sovint condueix a un caos fàcil de trencar.

N’hi ha molts d’altres, hauríeu d’esbrinar què s’adapta millor a les vostres necessitats. Tot i això, us recomano que llegiu la documentació, el motiu i els problemes que resolen aquestes convencions.

És possible que no en feu servir cap, però és important saber per què existeixen.

TL; DR

  • Escriviu el màxim CSS possible. Si no trobeu cap bon projecte per treballar, agafeu un esborrany i implementeu-lo.
  • Millora el codi cada vegada. Proveu d'escriure cada component de manera més intel·ligent cada cop que aprengueu fins que a la llarga us sentiu contents amb el vostre plantejament.
  • Apreneu dels grans: vegeu com funcionen els llocs web a gran escala. Mireu què podeu aprendre d'allà i implementar-lo als vostres projectes.
  • Utilitzeu o, com a mínim, comprendre per què existeixen les convencions de denominació. Saber quins problemes resolen. Decidiu quin és el més adequat per al vostre projecte.

CSS sembla senzill, però hi ha tants que poden anar malament. Després de superar les 5.000 línies, les coses es poden posar molt desordenades. Una mala planificació comporta la sobreescriptura de contingut, es desencadenen consultes de mitjans incorrectes en punts inesperats i les regles de resposta poden convertir-se en un malson.

Per millorar, heu de llegir molt sobre tots aquests problemes, identificar-los mitjançant el vostre propi codi i planificar com estructurar la vostra aplicació / lloc perquè no us hagueu de preocupar del tot.

Si us ha agradat aquest article, no us oblideu de fer clic al símbol cardíac que hi ha a continuació.