Now- a- days, front-end development focuses on efficiency- faster loading and minimizing code. This article covers the 5 most important Pro CSS Tips which helps you to cut down on duplicate rules and overrides, standardize the rules of styling across your layouts and help you create a personal framework that is not only efficient, but solves many common problems too.
1. Use a CSS Reset:
A CSS Reset or a Reset CSS is a short, compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline. Most projects really do not need all of the rules these libraries include and can get by one simple rule to remove all the margins and padding applied to most elements in your layout by the browser’s default box model, this is called Border-box.
*{
box-sizing:border-box;
margin: 0px;
padding: 0px;
}
Using box sizing is optional if you follow the inherit box-sizing tip below or you may skip it.
2. inherit box-sizing Property:
Html
{
box-sizing: border-box;
}
*, *:before, *:after
{
box-sizing: inherit;
}
Let box-sizing be inherited from HTML
3. use :not() to styles borders on Lists:
It is a very common practice in Web Design to use :last-child, nth-child selectors to override a style previously declared on the parent selector.
As we can take the example of the navigation menu in which we use borders to separate each menu link and the second rule is to remove the border from the end.
.nav li
{
border-right:1px solid #666;
}
.nav li: last-child
{
border-right:none;
}
This is basically messy as we not only force the browser to render things one way and then undo it for a specific selector. Instead of using border-right: none, we can use Psudo class selector, i.e : not selector.
.nav li:not(:last-child)
{
border-right:1px solid #666;
}
This statement says that put a border on all the .nav list items except the last one.
4. Add the line-height to the body:
The one thing that makes style sheet so inefficient is repeating declaration classes over again and again. Line Height is one property which you can set for your entire project, not only to minimize lines of codes, but to give a standard look to your site’s typography.
Body
{
line-height:35px;
}
Rather than add line-height to each element in the HTML and so on added to the body.
5. Style “default” links:
When we think about styling the Links, we can find a generic style in every sheet; this makes you write additional overrides and style for any links. This will also create a problem when we are working in CMS like WordPress where styling a default link is basically difficult.
a[href]:not([class])
{
color: #999; text-decoration: none;
transition: all ease-in-out .3s;
}
Now the style will only apply itself to links that otherwise have no other style rule.
Hope you have enjoyed my article on css tips. Please do share your comments & other css tips which might enhance the css skills of other readers.
Checkout this article containing 6 simple tips to help you become a better PHP developer
WordPress has evolved as the most innovative tool for website building. By far, the biggest advantage of WordPress is that one does not need to be a technical expert to work on WordPress. Checkout this article “10 steps to build a basic WordPress website” to build a website on your own.
We at Aapna Infotech, help to develop brand experiences for startups, corporations, organizations & is one of the leading outsourcing solution providers in the field of web application development
