Arayüz CSS

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

Nisa Bengisu

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

CSS Sıfırlama, çalışmak için temiz bir temel sağlar

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.

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

Shortcuts should reduce file size and speed up loading times

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

You shouldn’t repeat yourself

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

Use standard naming conventions for your parameters

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 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 🙂

Flexbox, the latest modifier in web design

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 


Yazar hakkında

Nisa Bengisu

Nisa Bengisu

Süleyman Demirel Üniversitesi'nde Bilgisayar Mühendisliği okuyorum. Web tasarımı Front - End kısmıyla ilgileniyorum. Bildiklerimle beraber yeni öğrendiğim konuları mutfakta paylaşıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz.
Yorum alanı ile mutfağa katkıda bulunun.

Yorumlar

1 Yorum

  • Bu yazıyı dilimize kazandırdığınız ve anlaşılır kıldığınız için teşekkür ediyorum.

Can için bir cevap yazın X

This site uses Akismet to reduce spam. Learn how your comment data is processed.