Önce HTML veya CSS yazmalı mıyım?

HTML / CSS geliştirme için birçok analoji var; Bu yeni başlayanlar için biraz kafa karıştırıcı olabilir.

• HTML = temeller / ev
• CSS = duvarlar / plan / duvar kağıdı

Burada en iyi uygulama var mı? Önce hangisini yazmalıyız?

Önce bir ev inşa etmeli, sonra boyamalısın.

Bir HTML belgesi, donuk görünmesine rağmen kendi başına durabilir. Bir CSS stil sayfası olamaz; görüntülenebilecek bir şey değildir (kod hariç), ancak görüntüleme talimatlarıdır.

Farklı bir konu, resim sırasında evde değişiklik yapmak isteyebilirsiniz. Genellikle uygun olmayan gerçek evlerde, ancak HTML + CSS geliştirmede, HTML belgenizde stillendirmeyi kolaylaştırmak için fazladan bir işaretlemeye ihtiyacınız olduğunu fark etmek normaldir. (Güçlü CSS3 seçicileri sayesinde eskisinden daha az yaygındır.)

Her zaman ilk önce kalem ve kağıt kullanırım, tam boyutlu kağıt, ölçekli çizimler.

Eğer tasarımınızı ütülenmemişse. Tasarımınıza güveniyorsanız, dengeli bir yaklaşımım var; html yapısıdır, tutkal css. (HTML, CSS) 'tuples' kavramını geliştirmeye devam et.

(HTML,CSS) + (HTML,CSS) -> (bigHTML,bigCSS)

(bigHTML,bigHTML) + (bigHTML,bigCSS) -> (biggerHTML, biggerCSS)

ve bunun gibi.

Yine de böyle yapıyorum.

Çok şey, yaptığınız web sitesi / web uygulamasının türüne ve hangi bağlamda kullanılacağına bağlıdır.

Çoğu durumda, anlamsal olarak sağlam HTML oluşturmak, ardından standartlara uygun tarayıcılar için CSS eklemek ve ardından müdahaleci olmayan bilgisayar korsanları ve kuralları uygulamak (örneğin, IE'nin koşullu yorumları, -vendor-somethingCSS kuralları, javascript uyum katmanları vb.) ) standart dışı tarayıcıları desteklemek ve satıcıya özel özellikleri etkinleştirmek için.

Bununla birlikte, bazen stil sayfalarını paylaşan bir grup bağımsız web uygulamanız olabilir (örneğin bir ev stilinin bir parçası olarak) ve hatta her birinin HTML çıktısını kontrol etmek için lüks bir konumda olabilirsiniz. Bu durumda, önce CSS'yi yazmak ve sonra onunla çalışmak için HTML'yi değiştirmek, daha iyi bir yol olabilir. Bunu yaparsanız, gidilecek yol ilk önce ne tür sayfa elemanlarına ihtiyaç duyacağınızı analiz etmek, bunlar için sınıflar tanımlamak, sonra bunları kullanan statik bir test belgesi yazmak, stil sayfalarını yazmak ve sonra yazmaya başlamaktır. bunları kullanan uygulamalar.

Her şeye rağmen, böyle lüks bir konumun son derece nadir olduğundan şüpheleniyorum ve az sayıda şirket CSS düzeyinde birleşik bir ev tarzının değerini gerçekten kabul ediyor; daha sık olarak, pratiklik bir tasarımcının ev tarzını oluşturmasını ve ardından onu izlemesi gereken her uygulama için bağımsız stil sayfalarının yazılmasını önerir. Bunun nedeni, çoğunlukla, çoğu şirket, en azından bir kısmı için sınırlı değişiklik yapma olanaklarına sahip hazır yazılım kullanmasıdır ve çoğu zaman HTML çıktılarını belirli bir stil sayfasına uyacak şekilde değiştirmek çok daha zordur (hatta imkansızdır. bazı özel paketler) CSS'yi yeniden yazmaktan. Ek olarak, bir düzine stil sayfasını sağlama çabası genellikle göz ardı edilir ve bazı küçük farklılıklar ve tuhaflıklar kabul edilebilir sayılır.

Bu çok eski bir soru-cevap olmasına rağmen , yorum yapma gereğini ve sorumluluğunu hissediyorum.

Evet, HTML CSS'den önce yazılmalıdır, ancak ...

Sen sayfadaki tüm HTML yazmak OLMAYAN , sonra CSS yazmaya geri dönün. Bu, doğru aralıklarla ve yorumlarda bile, oluşturduğunuz bölümleri açıkça hatırlamanızı oldukça zorlaştıracaktır.

Çok katmanlı bir kek yapıyormuş gibi, katmanlar halinde bir web sitesi oluşturursunuz.

1. Katman - Öncelikle tabanı, konteyner divini asgari yükseklik ve genişlik css ile oluşturursunuz.

2. Katman - Sonra bir sonraki katmanı, sayfanın büyük bölümlerini (divs ve yapı için stil), örneğin satır veya sütun gibi görünen bölümleri oluşturur.

3. Katman ve Ötesi - Sonra ikinci bölüm katmanına eklemeye devam edersiniz.

Bu şekilde, bir miktar HTML yazarsınız, daha sonra yapı için CSS ile stillendirin, durulayın ve tekrarlayın. Tecrübelerime göre, bu web sayfaları oluşturmak için çok daha etkili bir yol ve bence ilk önce tüm HTML alternatiflerinden çok daha hızlı.

Son olarak, tüm öğelerinizin bir özetini elde etmek için " * {outline: 1px dotted red} " kullanmayı deneyin , bunları stillendirmeyle sayfanıza eklerken, anahatlarını görebilir ve neye benzediğini tahmin etme konusunda endişelenmenize gerek kalmaz arkaplan renklerinizi eklersiniz. Bu özel kullanım için sınırdan kaçınıyorum, çünkü sınırlar öğelere piksel ekliyor, anahat bir kaplamadır.

Bir deneyin, teşekkürler!

Web sitelerinin yapısı (HTML) ile çalışmanın, öncelikle web sitenizi biçimlendirme ve biçimlendirme söz konusu olduğunda, öğeler hakkında bir fikriniz olacağından daha anlamlı olacağına inanıyorum.

Bu sizin asıl rolünüze ve gelişim hedefinizin temeline bağlıdır. Amaç bir web sayfasında neyin gösterileceğini belirlemekse, HTML ile başlamalıdır. Amaç hoş ve tek tip bir tasarım oluşturmaksa, biri CSS ile başlayabilir. Her iki durumda da, kişi önce kâğıt ve kurşun kalemle başlamak daha iyi olabilir ve mevcut amaç bir web uygulaması geliştirmekse, biri HTML veya CSS ile başlamamalıdır. En iyi uygulama, ilk önce ne geliştirmek istediğinizi düşünmek ve ardından sadece her şeyi bir araya getirmek yerine, görevi hedeflere ve alt amaçlara bölmektir.

Evi (ızgara düzeni) birlikte nasıl dekore edileceği fikriyle birlikte tasarlayın; Evi (HTML) ızgarayla oluşturun; sonra süsleyin (CSS stil sayfası).

İlk evi (HTML sayfası) kurduktan sonra, devam ettiğinizle aynı dekorasyonu (CSS stil sayfası) uygulayabilirsiniz. Dekorasyonu ilerledikçe düzenleyebilirsiniz.

Sonunda, yeniden dekore etmek isteyebilirsiniz (CSS stil sayfasını yineleyin).

Öğrenme ve inşa etmek için gerçekten zayıf bir çerçeve seçtiniz.

Burada iki ortogonal sorun var.

1. İhtiyaçlarıma uygun bir siteyi nasıl kurarım?
2. Bir web sitesi oluşturmayı nasıl öğrenirim?

Bunlar çok farklı iki görev olabilir (ve genellikle yaparlar) farklı potansiyel olarak çelişen yaklaşımlar gerektirir.

Bir projenin yeteneklerini, teknolojilerini ve gereksinimlerini biliyorsanız, bir sitenin ihtiyaçları hakkında bir tartışma ile başlar ve ne yapılması gerektiğini belirlemek için tasarım alıştırmaları yapılır. Bu, çoğu zaman HTML veya CSS ile ilgisi olmayacak işaretler ve tasarım öğeleri anlamına gelir (bazı insanlar HTML ve CSS ile mockup yapsalar da).

Bir siteyi nasıl inşa edeceğinizi, aynı zamanda bir siteyi inşa etmeyi öğrenmeye çalışıyorsanız, neyin inşa edilmesinin mümkün olduğunu bilmeden önce gerçekleştirmeniz gereken bir keşif ve öğrenme süreci vardır.

Modüler ve yinelemeli tasarım ve inşa stratejisinin popüler hale geldiği yer burasıdır. Son ürününüzle nereye gideceğinizi bilmediğiniz zaman (çünkü neyin mümkün olduğunu bilmiyorsanız), küçük işlevsellik parçaları oluşturuyorsunuz, gereksinimlerinizi karşılayıp karşılamadığını deniyorsunuz ve daha sonra bu küçük deneyi uygulamaya dahil ediyorsunuz. daha büyük bir bütün.

Peki, bu somut anlamda aslında ne anlama geliyor? Bir siteyi inşa etmek, bir ev inşa etmek gibi olabilir, burada mimari planlar (tasarım örnekleri) hazırlar ve evinizin ayağa kalkıp estetik ihtiyaçlarınızı karşılayıp karşılamayacağını hesaplamak için mühendislik yapmaya başlar. Ancak, bir site oluşturmak, bir dizi küçük deneme oluşturmak ve orijinal konseptinize uygun bir ürüne ulaşmak için adım adım yaklaşmak gibi görünebilir (ve genellikle gerekir).

Çok pratik bir konu olarak, hemen hemen herkes hem HTML hem de CSS'leri ile aynı anda uğraşmaktadır.

Bu, herhangi bir yazılım geliştirme projesinde ortak bir sorundur ve bu nedenle Hızlı Prototipleme, DSDM gibi konseptlerden herhangi birini kullanarak faydalanabilirsiniz. Herhangi bir stille kombine edilebilir, örneğin çevik (aşırı programlama veya Özellik Tahrikli Tasarım (favorim)). Başlangıçta karar verdiğiniz ortak ilkelere bağlı kalarak, onlarla yüzleşin ve onları bekleyin (KISS, YAGNI).

Bu yüzden benim için: - talebin bir işlevsel bloğunu kapsayan ilk önce temel bir işlevsel 'prototip' inşa et. Kendini 'bu güzel olabilir' / 'Bunu daha sonra tekrar kullanmam gerekebilir', zor olmadıkları sürece. Kendine söyle, ihtiyacın olmayacak! (YAGNI). - 'Kodlama kuralı' olarak verdiğiniz kararları yazın ve bunlara sadık kalın; örneğin php etiketleri: Kısa senaryolar kullanıyorum çünkü senaryo argümanım için ... uygulanıyor ve ... yok. - temel stil ekleyin, ancak tekrar kendinizi kısıtlayın.

Ardından, daha işlevsel blokları kapsayan daha yüksek bir prototip alana kadar kodunuzu genişletin. Buna paralel olarak, css modelinizi büyütün. Halihazırda yapmış olduğunuz her şeyi etkileyen kararları alır almaz (yapacaksınız), okumaya devam edin, bir karar verin ve neden sola veya sağa gittiğinizin kodlama sözleşmelerine yazın.

Daha olgun ve nihai bir ürüne doğru yolunuzu çizin.

Karşı karşıya kalabileceğiniz büyük kararlardan korkmayın, çünkü onlar için endişelenmek, onu düzeltmek yerine size zaman kazandırabilir. Ayrıca, internet topluluğunun omzunuzun üzerinden kaşlarını çattığını düşünerek endişelenmeyin, sonunda işe yarayan bir ürününüz olduğunda, çok şey öğrendiniz ve kötü kaynak kodunun yaratıcı hakimi daha çok memnun olacak. inşa edeceğiniz bir sonraki şey (buradaki yinelemeye dikkat edin).

Sadece 50 puanım

Bir web sayfasını bir evle karşılaştırırken:

HTML = temeller / ev CSS = duvarlar / plan / duvar kağıdı

Oturdukları temelleri inşa edene kadar duvarları havada nasıl süzersin? Stilleri uyguladığınız HTML etiketlerini yazana kadar sayfanıza stil vermek için CSS'yi nasıl yazabilirsiniz.

Her bir CSS parçası, belirli HTML etiketlerini tasarlamaktadır. Bu etiketlerin stil oluşturabilmesi için var olmaları gerekir. Stillendirilecek HTML'niz yoksa, CSS dosyası, içindeki herhangi bir stil aslında hiçbir şey stillemediğinden gereksiz olduğundan boş olmalıdır.