Temiz Kod: HTML/CSS Essentials Neden Hala Önemli?

Web geliştirmedeki 15 yıllık deneyimim boyunca, kurumsal düzeyden yeni başlayanlara kadar çeşitli şirketlerle çalıştım ve bu süreçte birçok yazılım mühendisiyle çalıştım. Projelerimde karşılaştığım en yaygın ve önemli sorunlardan biri, temiz ve anlaşılması kolay kod yazamama oldu .

Birinci sınıf şirketlerin en iyi geliştiricileri bile her zaman en iyi uygulamaları takip etmez ve temizlenip optimize edilebilecek kodlar yazmaz.

Dağınık ve Kirli Kodun Sonuçları

Temiz kod ilkelerini tartışan eski ama yine de alakalı bir blog gönderisinden alıntı yapmak için:

Kaynak kodu finansal borca ​​benzer. İçinde yaşamak için bir ev satın almak istediğinizi varsayalım. Çoğu insanın bir ev için nakit ödeme yapacak maddi durumu yoktur, bu yüzden onun yerine ipotek alırsınız. Ancak ipoteğin kendisi sahip olmak için harika bir şey değil. Bu bir sorumluluk. Borcunuza her ay faiz ödemek zorundasınız…

Web geliştirmede de öyle. Kodun devam eden maliyetleri vardır. Bunu anlamanız, sürdürmeniz, zamanla yeni hedeflere uyarlamanız gerekir. Ne kadar fazla kodunuz varsa, devam eden maliyetler o kadar büyük olacaktır. İş hedeflerimizi gerçekleştirmeye devam ederken mümkün olduğunca az kaynak koduna sahip olmak bizim yararımızadır.

Ama soyut üzerinde durmayalım. Bu makale, temel temiz kod ilkelerini, kodu düzenlemek için kullanılan farklı teknikleri ve kodun nasıl daha sürdürülebilir, ölçeklenebilir ve hata ayıklaması daha kolay hale getirileceğini ele alacaktır.

Kaliteli kod, temel kod stiliyle başlar, HTML/CSS'de birçok yeniden kullanılabilir blokla büyük uygulamalar yazarken en iyi uygulamalara genişler ve ayrıca, üçüncü taraf çerçeveleri ve bunların en iyi uygulamalarının yanı sıra daha fazla örtük okunabilirlik oluşturmak için adlandırma kurallarını tartışacağız.

Bunu okumayı bitirdiğinizde, kaliteli kodun temellerini ve HTML ve CSS kodunuzu korumayı ve genişletmeyi nasıl kolaylaştıracağınızı iyi anlamalısınız.

Kod Stilinin Temelleri

İyi HTML ve CSS kodunun temelleri ile başlayalım: W3C geçerliliği, adlandırma kuralları, dosya yapısı vb.

İlk günden itibaren yapıya dikkat edin.

Büyük bir uygulama geliştirecekseniz, dosya yapısına dikkat etmeniz gerekir. Şöyle görünebilir, daha doğrusu şöyle görünmelidir:

Kodunuzu kontrol etmek için doğrulayıcıları kullanın.

Her zaman HTML ve CSS doğrulayıcıları kullanmaya çalışın.

Kötü kod:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

İyi kod:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Temiz kod ilkelerinin geçerliliği için <img> etiketlerinde alternatif metin kullanın.

Bu özellik SEO, arama motorları, web tarayıcıları, ekran okuyucular vb. için hayati bir rol oynar.

Kötü kod:

 <img src="demo.jpg">

İyi kod:

 <img src="demo.jpg" alt="This is placeholder of the image">

Kebap kılıfı kullanın (spinal kılıf).

İsimler için kebab-case ( spinal-case ) kullanmaya çalışın ve camelCase veya under_score kullanmayın. under_score yalnızca BEM kullanırken kullanın, ancak Bootstrap kullanıyorsanız tutarlı olmak ve sınırlayıcı olarak - ile devam etmek daha iyidir.

Kötü kod:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

İyi kod:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case , camelCase ve under_score daha okunaklı.

Herkesin anlayabileceği anlamlı isimler kullanın, kısa tutun.

Sınıfların isimleri .noun-adjective gibi görünmelidir.

İçeriğe özel isimler yazmak yerine sınıfların ortak isimlerini kullanmayı deneyin. Kodu daha okunaklı hale getirir

Kötü kod:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

İyi kod:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

HTML5'te stil sayfaları ve komut dosyası için tür nitelikleri yazmayın.

HTML5 ile gerekli değildirler , ancak HTML4/XHTML'deki W3C standartları tarafından gereklidirler.

Kötü kod:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

İyi kod:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

Gerektiğinde belirli sınıfları kullanın.

CSS seçiciyi daha spesifik tutun ve ihtiyacınız olan öğeleri seçin; gerekmedikçe ebeveynlerinden bahsetmemeye çalışın. Kodun daha hızlı oluşturulmasını ve gelecekte yönetim engellerini ortadan kaldırmasını sağlar.

Kötü kod:

 section aside h1 span { margin-left: 25%; }

İyi kod:

 .left-offset { margin-left: 25%; }

Hedeflenen öğeye bir sınıf uygulamak HTML içinde daha fazla kod oluşturabilirken, kodun daha hızlı oluşturulmasına izin verecek ve yönetim engellerini ortadan kaldıracaktır.

Aynı bloğa başka bir stil vermek istiyorsanız, ana öğeye bir sınıf ekleyin.

Aynı bloğu ancak farklı stille kullanmanız gerekiyorsa, HTML'ye mümkün olduğunca dokunulmamış halde tutmaya çalışın. Sadece ana öğeye bir sınıf ekleyin ve tüm yeni stilleri CSS'de o sınıfın çocuklarına uygulayın.

Kötü kod:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

İyi kod:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Sıfır değerlerinden birimleri bırakın.

Birim eklemek gereksizdir ve ek bir değer sağlamaz. 0px, 0em, 0% veya başka herhangi bir sıfır değeri arasında fark yoktur. Birimler önemli değil çünkü değer hala sıfır.

Kötü kod:

 div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

İyi kod:

 div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

Bir hr etiketi ekleyebiliyorsanız, CSS'de border-bottom yazmayın.

CSS'de yeni bir seçici yazmak ve kenarlık stilleri eklemek yerine hr etiketini kullanın. Kodu daha biçimlendirmeye dayalı hale getirir ve biz de bunun için gidiyoruz.

Kötü kod:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

İyi kod:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

A > B seçiciyi kullanın.

Kuralları yalnızca doğrudan çocuk(lar) için uygulayan A > B seçiciyi kullanmak çok yararlıdır, bu durumda, bu stile ihtiyaç duymayan diğer tüm çocukların stillerini sıfırlamanız gerekmeyecektir. Örneğin, iç içe menüleri kodlarken çok kullanışlıdır. Alt menü stillerini yeniden tanımlamanız gerekmeyecek.

Kötü kod:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

İyi kod:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

Temiz HTML Nasıl Yazılır

HTML'ye geçerken öncelik, sağlam ve bakımı kolay bir ön uç sağlamak olacaktır.

Mümkün olduğu kadar işaretlemeye dayalı bir ön uca sahip olmaya çalışın.

Çok fazla CSS yazmak yerine ön uç kod işaretlemenizi temel alın.

Bu, arama motorlarına yardımcı olacak ve kodunuzu daha okunaklı hale getirecek, potansiyel olarak arama sıralamalarını ve kullanıcı deneyimini iyileştirecektir.

Kötü kod:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

İyi kod:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

HTML'de gereksiz sarmalayıcı kullanmaktan kaçının.

HTML'de gereksiz sarmalayıcı öğeleri kullanmamaya çalışın. Tonlarca <div> ve <span> öğesine sahip olmak geçmişte kaldı. Her şeyi ayrıntılı ve doğrusal tutmak, minimum kod elde etmenizi sağlar (bir sonraki noktaya bakın).

Kötü kod:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

İyi kod:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Şekillendirme için atomik sınıfları kullanın.

Herhangi bir özel renk veya yazı tipi boyutu kullanmayın (renk veya yazı tipi boyutu çerçevede değilse, sadece atom sınıflarınızı ekleyin). Atomik sınıflar basit, tek amaçlı stil birimleridir. Satır içi stiller gibi, Atom stilleri de yalnızca tek bir stil bildirimi uygular.

Kötü kod:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

İyi kod:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Granüler ve atomik sınıfları tutmaya çalışın ve gerektiğinde kullanın. Sonuç olarak ön ucunuz daha fazla biçimlendirmeye dayalı hale gelecektir.

Anlamsal öğelerden yararlanın.

Semantik kullanmak daha iyi bir yapı sağlar ve kodun ve içeriğin okunmasını kolaylaştırır.

Kötü kod:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

İyi kod:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

HTML5 etiketlerini kullanın.

Yeni etiketler size daha fazla ifade özgürlüğü ve belgelerin otomatik olarak işlenmesini geliştiren ortak öğeleri standart hale getirme özgürlüğü verir. İşte tüm unsurların sağlam bir listesi. Birçok geliştiricinin her zaman çok fazla <div> ve <span> kullandığını keşfettim, ancak önce lütfen burada hangi etiketlerin sizin bağlamınıza mantıksal olarak uyduğunu kontrol edin:

Kötü kod:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

İyi kod:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Alt satır: HTML5'teki yeni öğeleri öğrenin ve kullanın. Bu çabaya değer!

CSS: Temiz Kod ve Ön İşlemciler

CSS söz konusu olduğunda, orijinal olmayan, ancak küstah tavsiyelerle başlamamak zor:

Bir CSS ön işlemcisi kullanın.

Sass, dünyadaki en olgun, kararlı ve güçlü profesyonel sınıf CSS uzantı dilidir.

Sass için iki sözdizimi mevcuttur. SCSS (Sassy CSS) olarak bilinen ve bu referans boyunca kullanılan ilki, CSS sözdiziminin bir uzantısıdır. Girintili sözdizimi (veya bazen sadece “Sass”) olarak bilinen ikinci ve daha eski sözdizimi, CSS yazmanın daha özlü bir yolunu sağlar.

Seçicilerinizi gruplayın: SASS'de @extend kullanın.

Seçicilerinizi gruplayarak veya @extend kullanarak, kodunuzu DRY (Kendinizi tekrar etmeyin) tutmaya yardımcı olmalısınız.

Kötü kod:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

İyi kod:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

CSS'de pikseller yerine rem birimleri kullanın.

Boyutlar ve boşluklar için REM'leri kullanın, örneğin, kök <html> öğesinin font-size tipi boyutları. Ayrıca, kök yazı tipi boyutunu değiştirerek (örneğin belirli bir medya sorgusu/ekran boyutunda) tüm projeyi hızla ölçeklendirmenize olanak tanır.

Duyarlı görünümler için daha az kod yazacaksınız:

Kötü kod:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

İyi kod:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

CSS'de sabit yükseklik veya genişlikten kaçınmaya çalışın.

CSS'de sabit yükseklik veya genişlikten kaçınmaya çalışın. İç içerik + dolgular ile yükseklikler oluşturulabilir ve genişlikler bir ızgara sistemi ile tanımlanabilir (gerekirse iç içe ızgara kullanın).

Kötü kod:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

İyi kod:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Üst öğeyi SCSS'de yalnızca bir kez kullandığınızdan emin olun.

Bir CSS ön işlemcisi kullanırken ve herhangi bir bölüm için stil yazmayı planlıyorsanız, CSS'deki ana öğeyi yalnızca bir kez kullandığınızdan ve tüm alt öğeleri ve medya sorgularını parantez içine aldığınızdan emin olun. Bu, gelecekte değişiklik yaparken ana ana öğeyi tek bir yerde kolayca bulmanızı ve değiştirmenizi sağlar.

Kötü kod:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

İyi kod:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Bir CSS kuralı yazmadan önce hangi öğelerin etkileneceğini düşünün.

Herhangi bir CSS kuralı yazmadan önce daima hangi öğelerin etkileneceğini düşünün. Değişiklikleriniz yaygın olmayacaksa, kurallarınızı yalnızca belirli bir öğeyi etkileyecek ve başka hiçbir şeyi etkilemeyecek şekilde yazın.

Kötü kod:

 /* Commonly used class */ .title { color: #008000; }

İyi kod:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Yenilerini yazmadan önce mevcut CSS kurallarını ve değişkenlerini aramaya çalışın.

Hem özel CSS'de hem de çerçevede her zaman istenen stile uyan mevcut kuralları arayın. Sadece yeterli bir şey yoksa, yeni bir tane yazmaya devam edin.

Bu, özellikle büyük uygulamalarla çalışırken önemlidir.

Kötü kod:

 .jumbotron { margin-bottom: 20px; }

İyi kod:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Belirli kurallar kullanın.

Arka planın bir özelliği varsa o özelliği belirtiriz, ancak farklı arka plan özellikleri varsa ona bir bildirim verebiliriz.

Kötü kod:

 .selector { background: #fff; }

İyi kod:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Kısa yol özelliklerini ve değerlerini kullanın.

Daha fazla steno özelliği ve değeri kullanmak için elinizden gelenin en iyisini yapın. Bir stenografi özelliği kullanarak, değerli zaman ve enerji tasarrufu sağlayarak, kısa ve çoğunlukla çok daha okunabilir stil sayfaları yazabilirsiniz.

Kötü kod:

 img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }

İyi kod:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Satır yüksekliği için px yerine em kullanın.

em ve px birimlerini kullanmak, tasarımlarımızda bize esneklik ve sabit boyutlara takılmak yerine öğeleri yukarı ve aşağı ölçekleme yeteneği verir. Bu esnekliği, tasarımlarımızın geliştirme sırasında daha kolay ayarlanmasını ve daha duyarlı olmasını sağlamak ve tarayıcı kullanıcılarının maksimum okunabilirlik için sitelerin genel ölçeğini kontrol etmesine izin vermek için kullanabiliriz.

Kötü kod:

 p { font-size: 12px; line-height: 24px; }

İyi kod:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Bootstrap sınıflarını mümkün olduğunca kullanın.

Bu kural genel olarak UI çerçeveleri için geçerli olsa da, dünyanın en popüler ön uç bileşen kitaplığı olduğu için Bootstrap'i örnek olarak kullanıyorum.

Bootstrap, çok sayıda hazır sınıf kullanmanıza izin vererek işinizi kolaylaştırır. Daha fazla HTML tabanlı işaretleme yapmak için Bootstrap sınıflarını mümkün olduğunca kullanmaya çalışın.

Kötü kod:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

İyi kod:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Çerçevenizi uygun şekilde özelleştirin.

Bootstrap, tek bir kod satırı yazmadan ön uçunuzu kolayca yapılandırmanıza ve özelleştirmenize olanak tanıyan options.scss dosyasına dayanır. Aksi takdirde, tüm özelleştirmeleri kendi başınıza manuel olarak yazacaksanız, hiç çerçeve kullanmamanız daha iyi olur.

Bazı geliştiriciler, Bootstrap'i yeni bir sürüme fazla güçlük çekmeden yükseltmeye devam edebileceklerini düşünerek değişkenler.scss dosyasını değiştirmekten kaçınırlar, ancak bu sıkıcı bir iş olabilir. Küçük güncellemeler bile geliştiricilerin değişiklik günlüğünü okumasını, tüm işaretleme ve CSS'yi gözden geçirmesini ve yeni sürüme manuel olarak geçiş yapmasını gerektirir.

Kötü kod:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

İyi kod:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

.container genişliğinin üzerine yazmayın.

.container genişliğinin üzerine yazmamaya çalışın. Bunun yerine bir ızgara sistemi kullanmayı deneyin veya yalnızca _variables.scss içindeki kapsayıcı genişliğini değiştirin. Genişliğini azaltmanız gerekirse, genişlik yerine maksimum genişlik kullanın. Bu durumda, Bootstrap'ten .container , duyarlı görünümlerde dokunulmadan kalacaktır.

Kötü kod:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

İyi kod:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Bootstrap 4 sınıflarını kullanın ve daha az CSS yazın.

Beta sürümünde olmasına rağmen Bootstrap 4'ü kullanmaya başlayın. Özellikle Flexbox ve aralayıcılar olmak üzere mizanpajları daha hızlı oluşturmanıza yardımcı olacak birçok yeni sınıf içerir.

Kötü kod:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

İyi kod:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Artık tüm sınırları veya bazı sınırları kaldırmak için bir öğeye sınıflar atayabiliriz.

Kötü kod:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

İyi kod:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

.col-md-X ve .col-lg-X , X için aynı değere sahipse .col-sm-X kullanın.

.col-md-X ve .col-lg-X .col-sm-X için aynı değerde ise yazmayın. Örneğin .col-lg-10 gerek yok çünkü yazarken .col-md-10 , içine otomatik olarak .col-lg-10 .

Kötü kod:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

İyi kod:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

.col-xs-12 kullanmayın.

.col-xs-12 kullanmayın çünkü .col-xs-X atanmamışsa varsayılan olarak .col-xs-12 olacaktır.

Kötü kod:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

İyi kod:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

reset.css kullanmayın; bunun yerine normalize.css kullanın.

Bootstrap kullanıyorsanız, normalize.css zaten orada bulunur, iki kez eklemenize gerek yoktur.

En iyi uygulama olmasalar bile yönergeleri izleyin.

Tutarlılık adına, başladığınız kuralları ve yönergeleri (adlandırma, kod stili veya dosya yapısıyla ilgili olsun) her zaman takip etmek daha iyidir.

Toplama

Umarım işinize yarayacak bir şey elde edebilmişsinizdir ve en iyi uygulamalarla minimal HTML ve CSS kodu yazmak hakkında daha fazla düşüneceksiniz.

Büyük şirketler için, karmaşık kodlar olduğunda büyük uygulamaları sürdürmek oldukça zordur. Ve elbette, büyük şirketlerin iyi kalite için ödeyecek paraları var. Temiz kodlama ilkelerini takip ederseniz, iyi bir iş bulma şansınızı artırırsınız. Serbest çalışma yönünü de gündeme getirmeye değer: Birden fazla projeyle uğraşan profesyoneller ve müşteriler, kısa sürede diğer geliştiricilere aktarılabilecek temiz kod sağlamalıdır .

Kodlama sürecini otomatikleştirmek, Gulp/Grunt görevlerini, Linterleri, Editör eklentilerini, kod üreten araçları, sizin yerinize kod yazan yapay zeka araçlarını ve diğerlerini kullanmayı planladığımdan, gelecek yazılarda daha gelişmiş konulara genişletmeyi umuyorum. İlgili konular.

Umarım bu ilginç ve bilgilendirici bir okuma olmuştur. Kodlama çalışmalarınızda iyi şanslar.

Toptal Mühendislik Blogunda Daha Fazla Okuma:

• CSS'de SVG Animasyonlarına Nasıl Yaklaşılır?