Zář
10

7 tipů jak si usnadnit a urychlit práci s HTML a CSS

By majlan  //  Tipy, Webová tvorba  //  Komentářů: 12

Když jsem kdysi začínal s tvorbou webů, moje začátky se asi nijak nelišily od ostatních. S pomocí jakpsatweb.cz (kam mimochodem občas zajdu i dnes) jsem skládal svoje první stránky, které byly tvořené jednotlivými barevnými obdélníky, tehdy navíc ještě frčely animované gify a jezdící text (vzpomíná si někdo na <marquee>)? Od té doby už uplynula řada let a jak jsem se postupně v této oblasti zdokonaloval, vytvořil jsem si několik návyků a pomůcek, které mi dnes pomáhají vytvářet weby rychleji a efektivněji. Právě o tyto triky se s vámi dnes podělím.

1. Odsazování a strukturování kódu

Jedním z velkých nešvarů dnešních kodérů a PHP programátorů je naprosté opomenutí jakéhokoliv formátování kódu. Často se tak můžete setkat s typickými „nudlemi“, tedy dlouhými nepřehlednými úseky kódu. Přitom stačí použít tabulátor nebo mezerník a kód vypadá najednou úplně jinak. Obecně je dobré odsadit každé zanoření elementů, tedy takto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<html>
  <head>
    <title>...</title>
  </head>
 
  <body>
    <div>
      <table>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
      </table>
    </div>
 
    <div>
      ...
    </div>
  </body>
</html>

Hodí se taky oddělit různé části kódu prázdným řádkem, který kód zpřehlední. Stejně principy platí i u PHP:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function ppl_prepare_template($template) {
	preg_match_all('/{((?:[^{}]|{[^{}]*})*)}/', $template, $matches);	
	$translations = array();
 
	foreach ($matches[1] as $match) {
		list($tag, $ext) = explode(':', $match, 2);
		$action = output_tag_action($tag);
		if (function_exists($action)) {
			// store the action that instantiates the tag
			$translations['acts'][] = $action;		
			// add the tag in a form ready to use in translation later
			$translations['fulltags'][] = '{'.$match.'}';
			// the extra data if any
			$translations['exts'][] = $ext;
		}
	}	
	return $translations;
}

2. Komentování uzavírajích tagů

Komentování je všeobecně dobrým zvykem i když jde o váš vlastní kód (zkuste si někdy otevřít nějaký projekt třeba po měsíci), teď se ale zaměřím na jeden konkrétní případ: když vytvářím HTML šablonu, komentuji všechny uzavírací tagy (větších elementů, tedy hlavně div a section). Vypadá to takto:

1
2
3
4
5
6
7
8
9
10

<div id="panel3"> 
  <div id="neco">
    <img src="img/neco.png" />
  </div><!-- /neco -->
 
  <div id="info">
    <h4>O nás</h4>
    <p>Lorem ipsum...</p>
  </div><!-- /info -->
</div><!-- /panel3 -->

Když pak do šablony doplníte obsah a PHP kód, použití takových komentářů vám značně usnadní orientaci.

3. CSS reset

CSS reset slouží k vyresetování všech vlastností dokumentu na výchozí hodnoty, tím pádem máte ve všech prohlížečích stejné výchozí podmínky. Jinak si každý prohlížeč nastaví jiné hodnoty. Já používám tento kód (který patří na začátek .css souboru):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

4. Řazení jednotlivých CSS vlastností

Jak postupujete, když stylujete nějaký prvek? Sázíte za sebe jednotlivé vlastnosti, jak vás napadne nebo máte nějaký systém? Já je řadím podle abecedy, takže i v případě většího počtu vlastností se v nich dokáži rychle zorientovat:

1
2
3
4
5
6
7
8
9
10
11
12

#kontakt form input {
  background: #E8E8E8;
  border: none;
  clear: both;
  color: #070707;
  float: left;
  font-family: "Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px 10px 10px 10px;
  width: 310px;
}

Zbylé tři tipy se týkají doplňků do Mozilla Firefox:

5. Firebug

Firebug je povinnou součástí výbavy snad každého webového vývojáře. Sada nástrojů, která umožňuje procházet HTML dokument, prohlížet jeho DOM, sledovat výsledné CSS styly každého elementu, debuggovat javascript a řadu dalších funkcí.

6. Colorzilla

Potřebovali jste někdy zjistit RGB kód nějaké barvy na webu a nevěděli jste jak na to? Díky doplňku Colorzilla to už nebude problém, umožňuje kapátkem získat barvu libovolného prvku na stránce, součástí je i míchátko barev a generátor CSS přechodů.

7. MeasureIt

Při tvorbě šablony je občas potřeba si některé části stránky přeměřit, což umožňuje doplněk MeasureIt. Je možné si v prohlížeči otevřít také grafickou předlohu a měřit i v ní.

Toto jsou tedy mé malé vychytávky, díky kterým jsem schopný tvořit weby rychleji a efektivněji. Máte nějaké vlastní osvědčené techniky? Setkali jste se s něčím neobvyklým?

7 tipů jak si usnadnit a urychlit práci s HTML a CSS, 6.3 out of 10 based on 4 ratings

12 komentářů k “7 tipů jak si usnadnit a urychlit práci s HTML a CSS”

  • Hynek Blaha 10.9.2012 v 19.21

    Já bych všechny internety zakázal.

    VA:F [1.9.20_1166]
    +6 / -0
    Odpovědět
  • zavrac 10.9.2012 v 23.03

    Hezký souhrn, mám podobné návyky jako ty.

    Pár poznámek:
    1) Tvůj CSS reset je validní? Osobně nepoužívám tak rozsáhlý.
    2) CSS vlastnosti v rámci selektoru řadím ne abecedně, ale typově (tz. nejdřív „blokové“ vlastnosti – margin, padding, border, max-width… pak vlastnosti fontu…)
    3) Místo Firebugu Dragonfly :)

    VA:F [1.9.20_1166]
    +1 / -0
    Odpovědět
    • majlan 11.9.2012 v 6.34

      Abych řekl pravdu, nikdy jsem netestoval validitu CSS…ale teď jsem to zkusil a validní je :-)

      Jasně, tvoje možnost řazení je taky v pohodě, řadíš to nějak i uvnitř těch jednotlivých částí?

      VN:F [1.9.20_1166]
      +0 / -0
      Odpovědět
      • zavrac 11.9.2012 v 14.52

        snad nikdy se mi to ještě nesešlo celé, ale zde je mé pořadí nejpoužívanějších vlastností:

        width
        min-width
        max-width
        height
        min-height
        max-height
        float
        clear
        position
        top, left, right, bottom
        margin
        padding
        border
        background
        color
        font-family
        font-weight

        Výhodou je to, že to oproti abecednímu řazení více odpovídá pořadí, v jakém (aspoň já) styluji. Na druhou stranu abecední pořadí je asi lepší pro týmovou práci, s kolegou jsme si na posledním projektu lezli krkem tím, že každý to měl zapsané jinak a druhý se v tom pak hůř orientoval.

        VA:F [1.9.20_1166]
        +0 / -0
        Odpovědět
  • Vojtěch Fadrný 11.9.2012 v 10.22

    Doporučuji používat Google Chrome – Developer Tools, Ctrl + Shift + I.

    Pro zájemce je tu i pěkné povídání http://www.manakmichal.cz/blog/prohlizece/ladime-webove-stranky-primo-v-prohlizeci-google-chrome/

    Používám Visual Studio 2012(dělám javascript), které práci hodně usnadňuje(intellisense, odsazování kódu atd.).

    VA:F [1.9.20_1166]
    +2 / -0
    Odpovědět
    • Roman Mazur 10.12.2012 v 19.44

      Jako JS editor na JavaScript silne doporucuji WebStorm od JetBrains. Povinne kouknout na video: http://www.jetbrains.com/webstorm/ Je to sice k frameworku angular.js ale ukazuje se tam spousta veci ktere nejsou na angularu zavisle. VS je fajn, ale na JavaScript je WebStorm rozhodne lepsi.

      K clanku: obecne pokud to clovek mysli s CSS a HTML opravdu vazne, tak rozhodne doporucuju BEM metodologii: http://bem.info/

      VA:F [1.9.20_1166]
      +0 / -0
      Odpovědět
      • majlan 13.12.2012 v 22.08

        Díky za tip! Mohl bys to BEM trochu shrnout?

        VN:F [1.9.20_1166]
        +0 / -0
        Odpovědět
  • Lukáš Knotek 12.9.2012 v 7.11

    Colorzillu taky používám, místo Firebugu Web Developer. Vím, že je asi slabší, ale pro mé občasné použití je víc než dostatečný a mimo jiné umí také měřit rozměry stránky podobně jako MeasureIt.
    CSS vlastnosti řadím stejně jako zavrac, i když tak nějak zhruba, nemám tu hierarchii přesně danou. :-)
    Komentování: souhlas!! Já se snažím komentovat co nejvíc. Těch pár minut, které tomu člověk věnuje, pak dokáže ušetřit hodiny, když něco hledá. A komentáře u uzavírajících tagů jsou někdy obzvlášť užitečné – není nad nekončené posunování nahoru a dolů a zjišťování, kde tenhle div vlastně začíná (samozřejmě třeba pspad to ulehčuje, ale ne vždy ho mám po ruce.)

    VA:F [1.9.20_1166]
    +0 / -0
    Odpovědět
    • majlan 12.9.2012 v 10.05

      Ty komentáře se hodí hlavně ve chvíli, kdy máš šablonu rozsekanou do více kousků, tam ti ani PSPad nepomůže :-D

      VN:F [1.9.20_1166]
      +0 / -0
      Odpovědět
  • Counter 28.10.2012 v 11.12

    pekné, niektoré nástroje čo sú spomenute v článku som nepoznal, idem ich hneď aj vyskúšať

    VA:F [1.9.20_1166]
    +0 / -1
    Odpovědět
  • Excel pro pokročilé 29.12.2012 v 7.59

    Výborně! Reset CSS, to mě nikdy nenapadlo. Já to vždycky napíšu pro Firefox a potom to optimalizuju pro IE. Takhle bych si možná ušetřil práci :-)
    Díky za tip!

    VA:F [1.9.20_1166]
    +0 / -0
    Odpovědět
  • Honza 4.2.2013 v 13.22

    Celkem hezky shrnuté. Nástroje o kterých je psáno v článku používám a hodně mi vše usnadňují.

    VA:F [1.9.20_1166]
    +0 / -0
    Odpovědět

Vyjádři svůj názor



Zajímá vás cokoliv o mobilních aplikacích? Uvažujete o spolupráci? Kontaktujte mne na seitler@reinto.cz

O mně

Jmenuji se Milan Seitler a jsem spoluzakladatelem společnosti Reinto s.r.o., ve které se věnujeme mobilním i webovým aplikacím a marketingu.

Zabývám se celým procesem tvorby mobilních a webových aplikací. Nejvíce se věnuji návrhu aplikace a UX/UI designu. Kladu velký důraz na jednoduchost a srozumitelnost uživatelského rozhraní.

Zajímám se o online i offline podnikání, fascinují mě úspěšní lidé, kteří se nebojí tvrdé práce. Mou hlavní motivací je konkurence, která mě vždy nutí jít do všeho naplno, protože nerad prohrávám.

Mám rád hudbu, knížky, sport a cestování.

milan@seitler.cz

kategorie

SSME FI MUNI

Informace a materiály

FIT VUT

Informace, projekty

Odkazy

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

Inzerujte zde!

Kupte si odkaz! PR 3, SR 2

TAGS

2012 acta akce api barcamp bash Bergamo blog brno byznys C chytni svojdu css cufon e-shop facebook filmy FIT VUT hobit hokejový souboj html internet explorer Iseo IT Itálie komunikace low-cost trip mozilla firefox objektově orientované programování osobní rozvoj parser php programování python pán prstenů přednáška regex reinto skript spartacus testování url volby 2013 vut wordpress

Nejčtenější články

Nejnovější komentáře

archiv

Odkazy

Partner links