{"id":6514,"date":"2020-10-01T21:05:50","date_gmt":"2020-10-01T21:05:50","guid":{"rendered":"http:\/\/www.glajumedia.com\/en\/?p=6514"},"modified":"2022-03-22T21:57:25","modified_gmt":"2022-03-22T21:57:25","slug":"5-tips-to-improve-your-css","status":"publish","type":"post","link":"https:\/\/www.gmedia.la\/en\/5-tips-to-improve-your-css\/","title":{"rendered":"5 tips to improve your css"},"content":{"rendered":"

If you work with a CSS file<\/a>, you know your way around this world. Some people might say that CSS is a straightforward language, so it makes it hard to make a mistake. By putting a set of rules for your website, it doesn\u2019t mean that it\u2019s done. However, some small sites only require a couple of CSS files, the rule before mention might work. In other cases, such as large applications, some situations can get out of control. The big question is how you can manage these kinds of situations?<\/span><\/p>\n

Here are 5 tips for your CSS which can help you to bring out the best from your styles.<\/span><\/p>\n

FRAMEWORKS OR NOT?<\/span><\/p>\n

Your main step is deciding if you really need to use a CSS framework. There are many lightweight options for a robust framework. Also, some of the selectors from a framework, you might never use, so your bundle will contain dead code.\u00a0\u00a0<\/span><\/p>\n

By using styles only for your buttons, you must outsource them to your CSS file and delete the rest. In addition, you can find unused CSS rules code by applying for coverage in DevTools.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

To find it, you must look for Coverage in the Tools panel. Then, you access to the Tools panel<\/span> by using <\/span>Ctrl<\/span> + <\/span>Shift<\/span> + <\/span><\/code>P<\/code>. <\/span>You need to start recording by clicking on the reload button. Now, everything that pops up in red is unused.<\/span><\/p>\n

USE A MARKUP<\/span><\/p>\n

Your CSS can get overload sometimes. Thus, you can minimize the size of your CSS bundles by using the right HTML elements. For example:<\/span><\/p>\n

\"\"<\/p>\n

With a <\/span>span<\/code> element as a header, the default display or font style will be revoked. This helps you by using an <\/span>h1<\/span>, <\/span>h2<\/span>,<\/span> or <\/span>h3<\/span><\/code> instead. They already have the styles that you need to for other elements.\u00a0<\/span><\/p>\n

REDUCE REDUNDANCY<\/span><\/p>\n

On some occasions is hard to spot a redundancy, and even more when repeating rules don\u2019t follow an order in the selectors. However, it is better to outsource your rules when your classes differ and use them as an extra class.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Try something different<\/p>\n

\"\"<\/p>\n

DON\u2019T TAKE OUT OUTLINES<\/span><\/p>\n

When writing CSS<\/a>, this is one of the most common mistakes developers make. Even if you think that is not necessary to remove the highlight that outlines create, you are making your site inaccessible.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Note: users using only keyboard navigation won\u2019t have an idea about what they are focusing your site. Also, elaborate custom outlines, if the look doesn\u2019t match your brand.\u00a0<\/span><\/p>\n

USE MOBILE FIRST<\/span><\/p>\n

Use a mobile-first every time that you have a deal with media queries. This means that mobile will be your first approach by writing CSS for small screen devices It will ensure that you add extra rules for your large devices, rather than rewriting your CSS rules.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

\u00a0Here at Gladumedia, we provide state-of-the-art technological solutions through our CSS knowledge. Whether your company needs IT, development, e-commerce, or cloud solutions, we have the experience and expertise that any digital project demands.<\/span> Contact us<\/span><\/a> today to learn more about our offerings!<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

If you work with a CSS file, you know your way around this world. Some people might say that CSS is a straightforward language, so it makes it hard to make a mistake…<\/p>\n","protected":false},"author":1,"featured_media":6525,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[39,17],"tags":[155,168,169,167,171,170],"class_list":["post-6514","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-category-more","category-web-design","tag-css","tag-css-tips","tag-improve-css","tag-tips-for-css","tag-tips-for-developers","tag-web-development-tips"],"_links":{"self":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6514","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/comments?post=6514"}],"version-history":[{"count":0,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/posts\/6514\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media\/6525"}],"wp:attachment":[{"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/media?parent=6514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/categories?post=6514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gmedia.la\/en\/wp-json\/wp\/v2\/tags?post=6514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}