CSS Tips To Level Up Your Skills

Here are some CSS tips to level up your skills.

Use CSS Reset

Reset libraries like normalize.css can provide a clean slate for your site’s styles to help ensure better consistency between browsers. Most sites don’t need all the rules libraries include so you can usually get by with removing all the margins and paddings applied to your elements in your layout.

The use of box-sizing declaration is optional.

Inherit box-sizing

Box sizing can be inherited from html.

Box sizing is easier to change when code is introduced through a 3^rd party plugin or application that use different behavior.

Use Flexbox To Get Rid Of Margin Hacks

Get rid of nth-, first-, and last-child hacks by using the space-between property value in flexbox.

This will prevent you from having to clear or reset margins to get the columns to break into the number of rows you want when you’re designing a grid like a portfolio or image gallery where you used floats.

Use :not() to Style Borders on Lists

Using last-child or :nth-child selectors is a very common practice in web design especially when you want to undo a style previously declared on the parent sector. Create a separator between each link and the second rule added to take that border off the end:

This can become messy because it forces the browser to render things one way the undo for a specific selector. Resetting styles is unavoidable but :not() using pseudo-class to only apply a style to the elements you want in one single statement:

Add line-height to body

Repeating declarations over and over again leads to inefficient style sheets. Once you get the hang of planning your projects and combining the rules, your CSS will become fluid. One way to understand cascade and how the styles you write can be inherited elsewhere. Line height is one of the properties you can set for your entire project.

But instead of adding line-height to each <p>, <h*> and so on, add it to body:

There is no unit declared here. It just tells you to make the line 1.5 times higher than font size for the rendered text.

Vertically-Center Anything

A vertically centered layout is a great way to set an elegant foundation for content layouts.

Use SVG for Icons

SVG scales is important for all browser types so ditch your png, .jpg, or .gif-jif- files for SVG Icon Fonts in FontAwesome 5.

Maintain accessibility with:

Use the “Owl” Selector

Use universal selector (*) and adjacent sibling selector (+) to provide powerful CSS capability that will allow you to set rules for all elements in the flow of the document that specifically follow other elements.

This will help you create a more uniform spacing.

Consistent Vertical Rhythm

Provide a visual aesthetic with consistent vertical rhythm. This will make content more readable where owl selector might be too general. Use a universal selector (*) within an element to create a consistent vertical rhythm for specific sections of your layout:

We hope that some of these tips will make your CSS more fluid.

What do you think of our tips? Did they make your coding easier? Tell us by leaving your comments below.

Also Read: CSS Tools You Should Be Using

The post CSS Tips To Level Up Your Skills appeared first on Creativ Digital.

Bourbon

Bourbon is a valuable resource for Sass developers. It’s a free mixin library for developing vendor prefixes and automated values with functions like modular scale.

It’s not a scripting library but a detailed compliment to Sass. You need to understand and know Sass in order to work with Bourbon but it’s worth learning especially if you want to improve your workflow.

Sierra Library

This is probably one of the coolest UI libraries for Sass. Sierra Library is open source and downloadable for use in any project.

It can also be customizable with options, typography, changing grids and everything with a single variables file. The source of the code is on GitHub so you can browse to see if it works for you.

Ultimate CSS Generator

There are many CSS generators that spit out code for gradients and shadow boxes and custom shapes. But what about finding all of this in a single website?

The Ultimate CSS Generator has a web code tools generator that comes in handy for everything you can imagine. Best of all it’s free. As you generate settings you will get notifications with code output with icons that indicate which browsers are supported.

Compass

Compass is a set of tools that run on top of Sass to make development easier. It is a trusted resource among Sass developers thanks to its powerful framework.

Newbies might find Compass confusing. It’s like PostCSS but it runs directly to a terminal to execute commands on your Sass files.

Koala App

Koala App is a GUI application. It handles Sass Less Compass and Coffee Script. It is made for these 3 operating systems and is one of the nicest interfaces you will find in an app.

It has many compiling options, error notifications and optional project settings to help you stay organized and keep track of all applications in 1 visual web editor.

There is no single CSS tool that can do everything. However, having access the right tools can make you do almost anything. These tools are some of the best and are geared toward CSS development. We hope you found something valuable in this collection.

Tell us what you think by leaving your comments below.

The post CSS Tools You Should Be Using appeared first on Creativ Digital.