CSS Best Practices

I have always tried to write a perfect CSS, but I think nobody can say that they're written CSS is perfectly and optimized. May be, one can say that perfect CSS writing is a myth. But with the skills and experience you can write some good style sheets.

If you look for some suggestions to write a perfect CSS, than might be possible to get many different ways to write a good CSS because everybody will give their own perfect style codes suggestion.

Though I have tried to list down few practical points to write a better style sheet. These points surely will help you to make your CSS less complex, optimized and clean-up.

There are few points which needs to be keep in mind while writing a CSS.

• Stay organized while writing the CSS. i. e. Make sure your header, nav bars, main selectors should come first.
• Make your CSS readable.
• Create a logical structure of CSS. I.e. overrides, margins, links and types, main layout, secondary layouts, form elements, etc. depending on the application structure.
• Make sure CSS classes name must be in small case.
• Use “-” instead of “_”.
• Naming convention of CSS class must be meaningful and useful.
• Use short hand CSS.

                Example:

                             margin-top: 10px;

                                    margin-right: 24px;

                                    margin-bottom: 12px;

                                    margin-left: 0;

                   Use

                                    margin: 10px 24px 12px 0;

• Use External Style Sheets.
• Use hex color codes instead of color names.
• Try to use Reset.
• Use multiple CSS classes.
• Comment your CSS to make other understand well.
• Group the classes which can be repeat on mostly elements.
• Use margin:0 to make layout in centre.
• Use List to present data in a structured way.
• Shrink CSS file size so that CSS will be lightweight and loading time could be faster.
• Simplify css using equivalences or unique commands.
• Don’t use extra selectors.
• Try to make a library of common css classes.
• Use proper document structure.

CSS is easy to use and lightweight and loads faster. There are many more advantages of using CSS. It helps webpages to make responsive on any devices.

References:

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

https://code.tutsplus.com/tutorials/30-css-best-practices-for-beginners--net-6741

https://www.smashingmagazine.com/2009/08/designing-a-html-5-layout-from-scratch/

http://learn.shayhowe.com/html-css/writing-your-best-code/

So Do You Think PhotoShop is Dead for Web Design?

So, let’s start with the flow. Since the ancient time of website making there is a simple flow our designer makes the design in the Photoshop and then developer start converting those .psd’s into the HTML. And this is how the design displays on our browsers and interactivity takes place by adding the scripts in the HTML.

Photoshop is a very powerful tool consisting many options like slicing, Pen Tool, and Lasso tool, etc. which saves a lot of time in designing static or dynamic web pages. 

Images, pictures are dominating social media and these pictures render in Photoshop. And to start making any website or web based work a strong knowledge of Photoshop is essential. Because to load images efficiently on the web, Photoshop’s image editing is a boon.

There are always two side of a coin.

Pros:

Helps to improve picture/image quality.

Helps to create digital image application.

Imported videos/Photos are organized.

For more reference visit here.

Cons:

This is not Open Source.

Not for beginners.

Advance feature may useless if one doesn’t knows about basic image editing features.

There are many image editing low expensive tools.

If you are really willing to try few another software’s, there are few good one here.

Page Layers

Canava

FlexBox

Still Photoshop has its own charm and no other tool can replace it. Into web designing slicing of images, creating logos, High Definition images are still being created in Photoshop.

References:

https://www.techwalla.com/articles/advantages-of-adobe-photoshop

http://www.online-sciences.com/technology/adobe-photoshop-advantages-and-disadvantages/

http://www.webdesignerdepot.com/2013/02/is-photoshop-dead/

https://watb.co.uk/the-future-of-web-design-and-why-photoshop-isnt-dead/

https://fstoppers.com/education/photoshop-dead-interview-dave-doeppel-44195