Daha İyi CSS Kodu Yazmak İçin 8 İpucu

Yazımızdaki 8 ipucu verimli, anlaşılır ve kullanışlı bir CSS yazmanıza yardımcı olacaktır.

Daha iyi bir CSS yazmak, sizi çok da zorlayacak bir konu değil. CSS kod dosyanız içerisinde nasıl çalıştığınıza ilişkin birkaç küçük ipucunun büyük etkilerini göreceksiniz. CSS becerilerinizi geliştirebileceğiniz ve daha anlaşılır, daha verimli ve daha kullanışlı CSS kodları yazabileceğiniz sekiz basit ipucuna göz atacağız.

1.CSS’i Sıfırlayarak Başlayın

Bazıları CSS Sıfırlamanın gereksiz olduğunu düşünebilir. Bu düşüncenin aksine, CSS Sıfırlama özelliği, temiz bir temelle başlamanıza olanak sağlar ve böylece web sitenize stil kazandırmayı kolaylaştırır Mechanical Pencils.

CSS Reset resets or overrides the browser’s default styles. You can write your own, use one of the many resets available online, or use a combination of the two.

2. Know Where to Use CSS Shortcuts

CSS shortcuts allow you to set multiple properties of an item on a single line. Using Shorthand saves space and takes less time to load. However, you should not always use it.

Sometimes longhand provides much needed clarity. But more importantly, it might be better if you only need to set one or two properties – or just need to override something.

Another thing to remember: when using the shorthand , the invalid features are reset, which can cause an undesirable effect.

3. Use DRY Methodology

The best advice to write better CSS code can be followed by following the DRY methodology. DRY stands for ‘self repetition’, do not use the same pieces of code over and over again.

One way to store DRY in CSS is to group it. Let’s look at an example.

Original CSS

Refactored and DRY

As you can see, this not only reduces the overall size of your CSS file – it loads faster – you can also take advantage of it in the maintenance area. If the color feature needs to be updated, we are just updating the point.

You can also use CSS special features to stay in DRY. It is especially used as follows:

Then, you can use it anywhere in your CSS code:

4. Stay away from overuse!

 There are very few situations required to use ! important . It is one of the most misunderstood and overused expressions.

Don’t get me wrong , the! Important statement has an important place, but often web developers use it desperately if things aren’t going well. So it is important for them to fix it  !  They add a little more weight to their rules by adding the expression.

The problem is that more and more things are reported, while it can be repaired with quick maintenance, it can turn into a big nightmare with a domino effect. Use ! important when absolutely necessary  ! wizard !

5. Be Consistent

Keep it consistent regardless of how you write your CSS and in what order you add the properties. Some people sort their items alphabetically, while others use a more logical approach – for example, arranging items by line length or type. It’s actually up to you. Whichever way you use it, stick to it so it’s easier to find something later Activatecomlink .

6. Make Standard Naming

Do not overdo it when naming your parameters. Naming by following your own and standard naming conventions.

Some things to consider when naming:

• Avoid unnecessary words:  These are words with color and location   (for example,  green text  or  top menu bar  )
• Use only lowercase:  CSS  is case-  sensitive, so don’t   create names like MeNuBaR . However, camel case (  menuBar  ) is acceptable, but it should be noted that it is not preferred in some cases  .
• Separate multiple words with a line: for  example,  main-menu  . You can also use the camel case ( mainMenu ), though I would suggest you don’t usually prefer this.
• Identify the same type of items in a specific place:   You must use multiple selectors for the same item type. For example, you can  combine a  list  and  list2 to create a single  list item .

When 7.Gerek! Use Comment

While we verify that the well-written code does not need comments, it is also true that in some places comments must be added to the code. The basic rule here is that the source code is added if it takes advantage of the comment. Otherwise, you shouldn’t.

If you’re wondering when comments might be needed, here are a few examples:

• Interpreted code:  If you are interpreting a specific code section for a specific reason, leave a comment explaining this reason. If you don’t, you may not remember why you originally interpreted it.
• Corrections:  If you add a statement about the correction of the code, it may be a good idea to add a comment that describes it.
• Reminders:  You may be working on more than one project at any time. If you have something left unfinished, you can use your comments as a reminder for what you will do next.
• Remarks:  If part of the code is not clear and you think a comment will help you understand your code, then you can still add a comment 123 com setup.

8.Flexbox Discover 🙂

When it comes to aligning the items on the page, Flexbox gives you full control. Using flexible patterns and elements, you can show exactly how your page looks. Flexbox also allows you to edit items vertically that cannot be edited vertically on a page.

It may sound confusing at first, but I am sure it will be useful to you. You can browse for more information about Flexbox .

Bibliography : https://www.creativebloq.com/advice/a-guide-to-writing-better-css