DEV Community

loading...
Cover image for Master these CSS concepts

Master these CSS concepts

faddalibrahim profile image Faddal Ibrahim ・2 min read

CSS is one of the core tools of web development to help craft beautiful styles and layouts for our projects. Nowadays there are a lot of CSS frameworks to make things easier. Most beginner developers dive into these frameworks too quickly. Even though frameworks will speed up your work, the problem comes in when you feel powerless without them. Here are some of the important CSS concepts to master, which you will need virtually all the time if you are coding from scratch. Master these concepts well and you won't panic when coding without a CSS framework.

1. Advanced Selectors and Specificity

You have probably been spamming ID and class selectors. It is time to learn other ways to make selections. Adjacent, sibling and direct child selector. Sound familiar? If no, then look them up. Learn about specificity too and how to use the !important keyword the right way.

2. Positioning

Relative, fixed, absolute, z-index etc. Positioning helps to deliberately interrupt the flow of your layout. You will need it most often to perform certain tricks with regards to your layout design.

3. Flexbox and Grid

Combination of these two is what you need to ace your layouts. With these, you can implement any layout design you think of. You need to learn them deep enough to understand the core differences and similarities between them. Doing so will help you to know when to use either or both.

4. Transitions and Animations

You have been relying on libraries for these, right? why not master them to create your own custom crazy animations?

5. Media Queries

Media Queries are required for responsive web design. They are used to specify styles for different screen sizes. Majority of users access websites via the phones. You need media queries to make it suitable for mobile users.

Discussion (0)

pic
Editor guide