/    Sign up×
Community /Pin to ProfileBookmark

How much should I pare down my code?

Copy linkTweet thisAlerts:
Sep 02.2014

I’ve been accused of making my webpages too code-heavy, so my most recent pages have looked like this:

[CODE]<!DOCTYPE html>
<meta charset=”utf-8″>
<title>Title Here</title>
<p style=”white-space:pre-wrap;”>
All content goes here.

Every last bit.</p>[/CODE]

Yes, I do use just the one <p> element. Is this pared down enough? Or am I going a little too far? ?

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@deathshadowSep 03.2014 — Hah, that's too far since you then have no semantics AND invalid markup. Good joke though. (I'm assuming this is a joke)

Though if you do indeed only have one paragraph, you went overboard since you shouldn't have a style attribute in the markup. If it's pre-formatted text, you should be using the PRE tag, not a paragraph as it could contain multiple paragraphs...

So IF that is in fact preformatted text and you gave a flying purple fish about valid/invalid markup... or quirks mode since you seem to be saying you'd have no other style, it could be cut down to:
&lt;title&gt;Title Here&lt;/title&gt;
&lt;pre&gt;
All content goes here.

Every last bit.&lt;/pre&gt;

Which despite being invalid, would work. You want UTF-8, set it in the HEADER server-side.

Though there's a difference between minimalism and byte-obsession; I prefer the former, the latter is taking it to the extreme... You should at least be using semantic tags to say what things ARE. The problem is when you start throwing in pointless wrapping DIV and endless pointless classes and ID's instead of leveraging selectors and inheritance.

The laugh right now being that a LOT of people out there seem to be saying all sorts of BS nonsense about the 'speed' of complex selectors, and somehow saying that using more markup by throwing classes at everything is going to be preferable to sibling and child selectors. We call these people "Morons".
Copy linkTweet thisAlerts:
@Mr_Initial_ManauthorSep 03.2014 — Actually, the W3C validator says it's perfectly valid HTML5--but yes, this is kind of a joke, and kind of a "no, you're wrong" (but not to anyone on the forum).

Originally, I used this kind of markup (I did use a <pre> element in that case) in response to someone who said if I pared down my markup and never touched content, I'd be able to get a page under 10 KB. So I picked one of my short stories and proved that, no, some of my pages can't be brought under 10 KB, even if it were plain text.

I'll plead guilty to complex selectors, though. In my HTML tutorial, (which was meant to be sold on CD), I created a JS script that allowed someone to create their own custom stylesheets to set page breaks and image sizes for printing, and the selectors got kind of complicated (for example, [FONT=Courier New]#HTML-Hyperlinks-URIs-Relative-Path > dl.dl1 > dt.dt2{page-break-before:always;}[/FONT], which sets a page break before the second <dt> element of the first <dl> element in the div with the ID #HTML-Hyperlinks-URIs-Relative-Path). But that's kind of a special case.
Copy linkTweet thisAlerts:
@deathshadowSep 03.2014 — Nothing wrong with complex selectors if it means less markup -- problem here is you have an Id so big I'd put a bullet in my head before using it, and a class on the dl and dt for christmas only knows what... but I'd have to see the content and markup since content dictates markup and content+markup should dictate selectors.

Though really I'd suspect that looks like a job or nth-child.
Copy linkTweet thisAlerts:
@Mr_Initial_ManauthorSep 03.2014 — Nothing wrong with complex selectors if it means less markup -- problem here is you have an Id so big I'd put a bullet in my head before using it[/QUOTE]

Um... I plead agglutination and use of IDs for assistance with styling. There IS a logical path to my IDs, though. With #HTML-Hyperlinks-URIs-Relative-Path, it is:

[LIST]
  • [*][b]HTML[/b] - refers to the book section (This is HTML, others are CSS, JavaScript, and Other)

  • [*][b]#HTML-Hyperlinks[/b] - The body element of the page dealing with hyperlinks has this id. The <h1> element reads "Hyperlinks"

  • [*][B]#HTML-Hyperlinks-URIs[/b] The <h2> element heading the <div> with this ID reads "Hyperlinks And URIs"

  • [*][b]#HTML-Hyperlinks-URIs-Relative[/b] = the <h3> element heading the <div> with this ID reads "Relative URIs"

  • [*][b]#HTML-Hyperlinks-URIs-Relative-Path[/b] - The <h4> element heading the <div> with this ID reads "The Path in a Relative URI"

    • [/LIST]

    I suppose I could get rid of #HTML-Hyperlinks- in most of the IDs (And end up with #URIs-Relative-Path). But the long ID not only helps with targeting a specific element with styling, it also allows for URIs such as "HTML-Hyperlinks.html[B]#HTML-Hyperlinks-URIs-Relative-Path[/B]", which will take you to the desired section.

    and a class on the dl and dt for christmas only knows what... but I'd have to see the content and markup since content dictates markup and content+markup should dictate selectors.[/QUOTE]

    For the added functionality of user-defined page breaks. I've never been afraid of code-heavy pages.

    Though really I'd suspect that looks like a job or nth-child.[/QUOTE]

    Old page is old, and it was written for something that might be viewed on browsers that don't support nth-child (it was originally going to be sold on a CD).
    ×

    Success!

    Help @Mr_Initial_Man spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...