Top 10 CSS Tips for Every Web Designer
Here are the top 10 rules you must follow while writing your style sheets. These will help you make your code efficient and modular. CSS consists of a number of features that most of us don't know about and they can prove to be really helpful!
So read this blog with a notepad handy! :)
Practise Creating Layouts by yourselves
Using Bootstrap and add-ons is cool, but have you ever created web page elements by your own? If not, what are you waiting for? Creating your own elements will always be better than using dependencies. This will help you become an expert at CSS and your web page be independent of other sources.
Understand the working of Flexboxes and Use them!!
Flexboxes are literally your saviours for every CSS problem! Right from adjusting elements to centering them. Once you get hold of how they are used, there's no way you're going back to other display methods.
Store Color names or Hex-Codes as Variables
This is that one thing that will help your code become modular afterall. In case you have to change your palette, Storing Colors as variables will make it 10 times easier! And you don't even have to remember the color hex-codes while writing your CSS this way. It can't get any better!
Avoid margin: auto;
Surprising? But true! margin:auto; is what most of the CSS developers use to center elements. But in turn, It creates a lot of chaos in the viewport and might vary from screen to screen. So, Always use trustworthy methods to center elements.
Do NOT use inline CSS unless there's no way out
Mostly because it will make that tag/element limited to a style. Inline styles overrule the externally embedded CSS. So be really careful when you add Inline CSS.
Plan the positioning of Divisions before writing the HTML
Always decide which element must be placed inside which division in terms of the HTML and add classes to the tags accordingly. This will reduce CSS code repetition and will make your HTML sorted,
Do not use Ids unless they are required
I can't really stress this enough because the use of Ids in styling is pretty much overrated. Classes do the same thing, but they have this advantage that they can be used for multiple elements and this is exactly why I recommend using classes for styling. Ids are unique and hence, use them only in case of unique elements or for identification in JavaScript.
Always have separate CSS stylesheets for viewport settings and animations
This will help you keep a track of your growth in CSS. The animations stylesheet can later be used to just reuse the keyframe effects the you have created already. And in order to do that, you just have to link the stylesheets to the HTML you want to embed them in.
Try to make almost every shape in CSS.
This will make you practise more, explore more in CSS and will get you familiar to many attributes you are unaware of. Also, CSS shapes are easy to render and independent of outside sources. So, their speed and efficiency will be better!
Most importantly, Be open to learning more.
Web Design is something which going to stay in trend during these digital times. And as a designer, We must always be open to criticism and learning. Always take a step ahead and get inspired with things around you. Go and create that effect you wanted to! Experiment with colours! Play with layouts!
PS: Just make sure that you know how to fix it! ;)
Happy Learning! Stay Safe!