Tips voor het werken met uw CSS3-stijlpagina's

Zodra we de structuur van onze website hebben gedefinieerd en het ARREST Op een precieze manier is het belangrijk om de stijlen ervan te definiëren, het is ook het meest creatieve gebied en waarin u met de hoogste mate van precisie kunt aanpassen tot de laatste hoek van uw website. Cascading style sheets zijn de meest geschikte oplossing, maar voor iedereen die zijn eerste uitstapje maakt in de wereld van webontwikkeling, zijn er enkele tips waarmee rekening moet worden gehouden om de beste resultaten te behalen.

Om een ​​professioneel resultaat te verkrijgen dat typerend is voor een toegewijde front-end, is het noodzakelijk om rekening te houden met bepaalde aspecten zoals volgorde, leesbaarheid en de correctie van de meest voorkomende fouten binnen dit soort praktijken. Ik deel hieronder vijf tips erg basic maar tegelijkertijd erg belangrijk voor de behandeling en optimale configuratie van onze CSS style sheets.

Zorg voor een effectieve volgorde en structuur in uw CSS3-stylesheets

Ik verdeel mijn stylesheets altijd in een hiërarchische volgorde. In de eerste plaats pas ik meestal algemene selectors toe en ga dan verder met het toevoegen van de declaraties van de html-selectors en tot slot ga ik verder met werken binnen de id's van de containers en secundaire elementen. In principe gemalen volg de logica van de DOM en begin bij de ouders om te eindigen bij de kinderen. We kunnen echter ook een andere formule of volgorde volgen, we kunnen bijvoorbeeld onze selectors en declaraties groeperen, rekening houdend met hun functie. Alles hangt af van wat onze voorkeuren zijn en hoe we ons prettiger voelen bij het werken.

Kies duidelijke en beknopte namen voor elk van uw selectors

Er is iets heel belangrijks waar u rekening mee moet houden, en dat is dat CSS3 verschilt in het gebruik van hoofdletters en kleine letters, dus het schrijven van een woord met een hoofdletter kan iets anders betekenen en kan fouten veroorzaken. Het eenvoudigste is om altijd kleine letters te gebruiken om dit soort problemen te voorkomen. Probeer ook kies namen voor uw klassen en uw ID's die duidelijk herkenbaar zijn en dat ze ons niet afleiden tot twijfels of fouten.

Vergeet niet om verduidelijkende opmerkingen toe te voegen

U moet uw bestanden zeker delen met andere mensen, misschien uw klant of collega's van uw werkteam, zoals lay-outontwerpers, andere ontwerpers of ontwikkelaars. Om deze reden is het erg belangrijk om aandacht te besteden aan de structuur en te zorgen voor een schone en ordelijke afwerking. De verduidelijkende opmerkingen zullen iedereen die toegang heeft tot onze stylesheet helpen om snel in één oogopslag de weg te vinden. Elke soort observatie waarmee rekening moet worden gehouden het moet als inhoud verschijnen. Onthoud dat u zowel inhoud in uw html-bestand als in uw CSS-bestand kunt opnemen en dat dit in beide gevallen opmerkingen zijn die logischerwijs niet in het eindresultaat zullen worden weerspiegeld en alleen zichtbaar zullen zijn wanneer de broncode wordt geopend, dus ze kunnen erg nuttig.

Pas altijd een reset toe in uw stylesheets

Elke browser heeft zijn standaard stylesheet, dus om fouten of wijzigingen te vermijden, afhankelijk van de browser waarin onze pagina wordt bekeken, is het erg handig en wordt aanbevolen dat reset je stylesheets​ Er zijn verschillende alternatieven, Eric Meyer's reset stylesheet kan een zeer goede optie zijn.

Kies de meest effectieve tool

Er zijn veel tools die u kunt gebruiken om zo efficiënt mogelijk te werken aan uw website-ontwerp. Van het maken van Wireframes tot het ontwikkelen van de structuur van uw site, evenals allerlei soorten applicaties, waaronder Adobe Photoshop, Illustrator of Fireworks​ Je hebt ook veel professionele editors die een van de meest worden aanbevolen (tenminste degene die ik gebruik) Sublime Text of, bij gebrek daaraan, Adobe Dreamweaver omdat ze zeer eenvoudige interfaces bieden met een hoge mate van persoonlijkheid, evenals de mogelijkheid om met onze codes te werken via een systeem van snelkoppelingen en met een automatisch compleet systeem dat ons zal helpen meer dan 70% van de tijd te besparen die we zouden gebruiken met een redacteur van traditionele platte tekst.