Meta tags:
description=Standards for developing consistent, flexible, and sustainable HTML and CSS;

Headings (most frequently used words):

css, html, syntax, html5, attribute, and, order, in, preprocessors, selectors, code, guide, table, of, contents, golden, rule, doctype, language, ie, compatibility, mode, character, encoding, javascript, includes, practicality, over, purity, boolean, attributes, reduce, markup, editor, preferences, declaration, logical, properties, colors, avoid, imports, media, query, placement, single, declarations, shorthand, notation, nesting, operators, comments, class, names, child, descendant, organization, spec, links,

Text of the page (most frequently used words):
the (69), and (65), for (42), css (31), use (27), with (25), element (22), html (22), #properties (18), code (17), values (17), border (17), color (15), your (14), example (14), attribute (14), class (14), you (13), when (13), margin (13), background (13), avoid (12), value (12), this (12), elements (11), more (11), syntax (11), declaration (11), only (10), all (10), line (10), box (10), component (9), instead (9), selectors (9), good (9), classes (9), style (9), shorthand (9), single (9), should (9), logical (9), text (9), order (9), attributes (9), include (8), that (8), space (8), table (8), like (8), are (8), nesting (8), radius (8), don (8), set (8), declarations (8), 1px (8), type (8), tweet (7), need (7), can (7), avatar (7), header (7), not (7), keep (7), selector (7), these (7), top (7), width (7), one (7), document (7), link (7), rgb (7), they (7), html5 (7), body (7), head (7), section (6), using (6), multiple (6), bad (6), reading (6), but (6), possible (6), modal (6), preprocessors (6), 10px (6), bottom (6), two (6), guide (6), encoding (6), src (6), doctype (6), optional (5), page (5), parent (5), names (5), title (5), comments (5), must (5), 3px (5), right (5), left (5), property (5), img (5), 15px (5), place (5), their (5), language (5), model (5), spaces (5), boolean (5), javascript (5), spec (5), mdo (4), here (4), files (4), them (4), consistent (4), limit (4), styles (4), additional (4), each (4), over (4), markup (4), notation (4), btn (4), lowercase (4), name (4), writing (4), without (4), less (4), whenever (4), there (4), url (4), image (4), article (4), font (4), position (4), inline (4), block (4), error (4), rule (4), media (4), import (4), href (4), colors (4), support (4), new (4), solid (4), every (4), mode (4), see (4), used (4), come (4), 0px (4), input (4), character (4), heading (3), sections (3), larger (3), custom (3), necessary (3), some (3), nested (3), unnecessary (3), child (3), span (3), scope (3), short (3), browser (3), tags (3), red (3), same (3), preprocessor (3), variable (3), button (3), related (3), written (3), ensure (3), great (3), operators (3), thead (3), consider (3), represents (3), override (3), padding (3), where (3), icon (3), height (3), separate (3), includes (3), any (3), selected (3), stylesheet (3), end (3), easier (3), placement (3), information (3), read (3), 255 (3), mdn (3), separated (3), eee (3), auto (3), direction (3), while (3), visual (3), center (3), content (3), flex (3), positioning (3), appear (3), most (3), fff (3), shadow (3), closing (3), soft (3), tabs (3), preferences (3), utf (3), trailing (3), editor (3), alt (3), data (3), standards (3), practicality (3), script (3), meta (3), quotes (3), compatibility (3), lang (3), what (3), follow (2), open (2), under (2), context (2), important (2), components (2), white (2), scanning (2), organization (2), tbody (2), may (2), cascade (2), overrides (2), descendant (2), username (2), stream (2), closest (2), strive (2), number (2), commonly (2), explicit (2), isn (2), also (2), useful (2), many (2), rules (2), behavior (2), out (2), prefix (2), based (2), succinct (2), excessive (2), doesn (2), dashes (2), breaks (2), close (2), write (2), complete (2), remove (2), readability (2), sass (2), simple (2), jpg (2), has (2), those (2), usually (2), either (2), default (2), instances (2), available (2), sprite (2), png (2), 16px (2), display (2), per (2), have (2), lines (2), future (2), query (2), rel (2), provided (2), other (2), file (2), modern (2), always (2), comes (2), functions (2), hsl (2), rgba (2), browsers (2), needs (2), flexible (2), why (2), terms (2), refers (2), misc (2), align (2), normal (2), 100px (2), list (2), please (2), bootstrap (2), would (2), size (2), dimensions (2), keeping (2), first (2), from (2), last (2), following (2), inset (2), ccc (2), 2px (2), secondary (2), ffffff (2), zero (2), hex (2), unique (2), leading (2), 5px (2), comma (2), after (2), its (2), own (2), blocks (2), way (2), guarantee (2), renders (2), environment (2), about (2), editorconfig (2), add (2), times (2), reduce (2), select (2), option (2), whatwg (2), required (2), div (2), purity (2), specify (2), including (2), rendering (2), characters (2), entities (2), edge (2), ie10 (2), tag (2), tools (2), determine (2), enforce (2), hello (2), world (2), company (2), github (2), sourced, mit, license, copyright, 2023, contextual, sub, modifer, sometimes, entire, enough, break, down, pages, rearranged, moved, advantage, separating, documents, develop, commenting, hierarchy, organize, helpful, often, recursively, immediate, children, later, combinator, item, container, stop, prefixes, prefixed, three, several, occuring, performance, known, impacted, generic, reliable, styling, dependent, apply, creating, denote, opposed, base, meaningful, structural, purposeful, presentational, arbitrary, mean, anything, underscores, camelcase, serve, natural, danger, wrapping, sure, sentences, phrases, general, notes, maintained, people, descriptive, well, commented, approachable, others, convey, purpose, simply, reiterate, shipping, production, improved, wrap, math, operations, parentheses, between, variables, reverse, mozilla, developer, network, unfamiliar, leads, sloppier, unintended, side, effects, headings, implies, previously, specified, usage, explicitly, frequently, overused, 40px, account, 20px, home, 220px, span3, 140px, span2, 60px, span1, key, factor, detection, validator, stating, 183, missing, sanity, removing, faster, editing, split, 480px, min, queries, relevant, sets, bundle, doing, makes, folks, miss, typical, setup, imports, core, steve, souders, concatenate, features, rails, jekyll, environments, compile, into, compared, slower, adds, extra, requests, cause, unforeseen, problems, opt, alternate, approach, smashing, magazine, regardless, choices, meet, smaller, wcag, minimum, contrast, ratios, now, aliases, meaning, modify, alpha, along, compability, hsla, major, levels, modes, tricks, flows, english, easily, languages, horizontally, vertically, chinese, japanese, korean, plus, shorter, simpler, alternatives, directional, dimensonal, abstract, vertical, horizontal, begin, evergreen, opacity, e5e5e5, f5f5f5, underline, decoration, 333, sans, serif, helvetica, neue, 14px, typography, items, justify, column, 100, index, absolute, stylelint, mixins, wherever, appropriate, mixin, function, responsive, part, systems, globally, reset, affect, overall, combined, near, sizing, because, flow, whether, float, grid, follows, dictates, alignment, everything, else, takes, impacting, previous, thus, inside, typographic, grouped, together, questions, wikipedia, cascading, sheets, specifying, units, quote, practice, consistency, cases, letters, much, discern, tend, shapes, parameters, semi, colon, prone, accurate, reporting, braces, before, opening, brace, legibility, grouping, individual, documenting, applying, project, learn, trim, save, settings, common, inconsistencies, dirty, diffs, better, superfluous, requires, iteration, refactoring, produces, checked, checkbox, disabled, present, empty, string, canonical, whitespace, guideline, presence, true, absence, false, further, consult, declared, xhtml, declare, such, requirement, form, control, toggle, identifying, miscellaneous, specific, second, followed, accessibility, tabindex, aria, role, particular, onclick, maintain, semantics, expense, least, amount, fewest, intricacies, external, links, typically, respective, defaults, dash, entity, charset, recommended, proper, declaring, allows, regular, matches, reserved, xml, ampersand, non, breaking, greater, than, still, emdash, compatible, http, equiv, below, awesome, stack, overflow, internet, explorer, days, unless, older, was, dropped, ie11, microsoft, legacy, otherwise, codes, iana, authors, encouraged, root, giving, aids, speech, synthesis, pronunciations, translation, forth, beginning, suggested, images, logo, omit, slash, self, says, double, never, indented, once, capitalize, person, matter, contributors, agreed, upon, guidelines, small, large, call, incorrect, additions, contributions, issue, golden, contents, created, repo, developing, sustainable,

Text of the page (random words):
delines at all times small or large call out what s incorrect for additions or contributions to this code guide please open an issue on github every line of code should appear to be written by a single person no matter the number of contributors html syntax don t capitalize tags including the doctype use soft tabs with two spaces they re the only way to guarantee code renders the same in any environment nested elements should be indented once two spaces always use double quotes never single quotes on attributes don t include a trailing slash in self closing elements the html5 spec says they re optional don t omit optional closing tags e g li or body doctype html html head title page title title head body img src images company logo png alt company h1 class hello world hello world h1 body html html5 doctype enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every html page in keeping with the suggested syntax keep it lowercase doctype html html head head body body html language attribute from the html5 spec authors are encouraged to specify a lang attribute on the root html element giving the document s language this aids speech synthesis tools to determine what pronunciations to use translation tools to determine what rules to use and so forth read more about the lang attribute in the spec head to the iana for a list of language codes html lang en html ie compatibility mode there s no need to include the internet explorer document compatibility meta tag these days unless you need support for ie10 and older the tag was dropped in ie11 and isn t used in microsoft edge legacy or otherwise for more information read this awesome stack overflow article ie10 and below only meta http equiv x ua compatible content ie edge character encoding ensure proper content rendering by declaring an explicit character encoding this also allows you to use regular characters instead of their html entities like instead of emdash provided their encoding matches that of the document for some reserved xml characters like ampersand non breaking spaces less greater than and quotes you may still need to use the html character entities utf 8 is the recommended encoding head meta charset utf 8 head body p use an em dash like so no html entity required p body css and javascript includes per html5 spec typically there is no need to specify a type when including css and javascript files as text css and text javascript are their respective defaults html5 spec links using link using style using script external css link rel stylesheet href code guide css in document css style style javascript script src code guide js script practicality over purity strive to maintain html standards and semantics but not at the expense of practicality use the least amount of markup with the fewest intricacies whenever possible good button button not good div class btn onclick div attribute order html attributes should come in this particular order for easier reading of code class id name data src for type href value title alt role aria tabindex style attributes that are most commonly used for identifying elements should come first class id name and data attributes miscellaneous attributes unique to specific elements come second followed by accessibility and style related attributes a class id data toggle modal href example link a input class form control type text img src alt boolean attributes a boolean attribute is one that needs no declared value xhtml required you to declare a value but html5 has no such requirement for further reading consult the whatwg section on boolean attributes the presence of a boolean attribute on an element represents the true value and the absence of the attribute represents the false value if you must include the attribute s value and you don t need to follow this whatwg guideline if the attribute is present its value must either be the empty string or the attribute s canonical name with no leading or trailing whitespace in short don t add a value input type text disabled input type checkbox value 1 checked select option value 1 selected 1 option select reduce markup whenever possible avoid superfluous parent elements when writing html many times this requires iteration and refactoring but produces less html not so great span class avatar img src span better img class avatar src editor preferences set your editor to the following settings to avoid common code inconsistencies and dirty diffs use soft tabs set to two spaces trim trailing white space on save set encoding to utf 8 add new line at end of files consider documenting and applying these preferences to your project s editorconfig file for an example see the one in bootstrap learn more about editorconfig css syntax use soft tabs with two spaces they re the only way to guarantee code renders the same in any environment when grouping selectors keep individual selectors to a single line include one space before the opening brace of declaration blocks for legibility place closing braces of declaration blocks on a new line include one space after for each declaration each declaration should appear on its own line for more accurate error reporting end all declarations with a semi colon the last declaration s is optional but your code is more error prone without it comma separated property values should include a space after each comma e g box shadow use space separated values for color properties e g color rgb 0 0 0 5 see the colors section for more information don t prefix property values or color parameters with a leading zero e g 5 instead of 0 5 and 5px instead of 0 5px lowercase all hex values e g fff lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes use shorthand hex values where available e g fff instead of ffffff quote attribute values in selectors e g input type text they re only optional in some cases and it s a good practice for consistency avoid specifying units for zero values e g margin 0 instead of margin 0px questions on the terms used here see the syntax section of the cascading style sheets article on wikipedia bad css selector selector secondary selector type text padding 15px margin 0px 0px 15px background color rgba 0 0 0 0 5 box shadow 0px 1px 2px ccc inset 0 1px 0 ffffff good css selector selector secondary selector type text padding 15px margin bottom 15px background color rgb 0 0 0 5 box shadow 0 1px 2px ccc inset 0 1px 0 fff declaration order property declarations should be grouped together in the following order positioning box model typographic visual misc positioning comes first because it can remove an element from the normal document flow and override box model related styles the box model whether it s flex float grid or table follows as it dictates a component s dimensions placement and alignment everything else takes place inside the component or without impacting the previous two sections and thus they come last while border is part of the box model most systems globally reset the box sizing to border box so that border width doesn t affect overall dimensions this combined with keeping border near border radius is why it s under the visual section instead preprocessor mixins and functions should appear wherever most appropriate for example a border top radius mixin would go in place of border radius properties while a responsive font size function would go in place of font size properties for a complete list of properties and their order please see the property order for stylelint used by bootstrap declaration order positioning position absolute top 0 right 0 bottom 0 left 0 z index 100 box model display flex flex direction column justify content center align items center width 100px height 100px typography font normal 14px helvetica neue sans serif line height 1 5 color 333 text align center text decoration underline visual background color f5f5f5 border 1px solid e5e5e5 border radius 3px misc opacity 1 logical properties logical properties are alternatives to directional and dimensonal properties based on abstract terms like block and inline by default block refers to the vertical direction top and bottom while inline refers to the horizontal direction right and left you can begin to use these values in your css in all modern evergreen browsers why use logical properties not every language flows left ro right like english so the writing mode needs to be flexible with logical properties you can easily support languages that can be written horizontally or vertically like chinese japanese and korean plus they re usually shorter and simpler to write additional reading css logical properties and values mdn css logical properties and values css tricks css writing modes mdn without logical properties element margin right auto margin left auto border top 1px solid eee border bottom 1px solid eee with logical properties element margin inline auto border block 1px solid eee colors with the support of css color levels 4 in all major browsers rgba and hsla are now aliases for rgb and hsl meaning you can modify alpha values in rgb and hsl along with this comes support for new space separated syntax for color values for compability with future css color functions use this new syntax regardless of your color values and syntax always ensure your color choices meet wcag minimum contrast ratios 4 5 1 for 16px and smaller 3 1 for larger additional reading smashing magazine a guide to modern css colors rgb mdn element color rgb 255 255 255 65 background color rgb 0 0 0 95 avoid import s compared to link s import is slower adds extra page requests and can cause other unforeseen problems avoid them and instead opt for an alternate approach use multiple link elements compile your css with a preprocessor like sass or less into a single file concatenate your css files with features provided in rails jekyll and other environments for more information read this article by steve souders use link elements link rel stylesheet href core css avoid imports style import url more css style media query placement place media queries as close to their relevant rule sets whenever possible don t bundle them all in a separate stylesheet or at the end of the document doing so only makes it easier for folks to miss them in the future here s a typical setup element element avatar element selected media min width 480px element element avatar element selected single declarations in instances where a rule set includes only one declaration consider removing line breaks for readability and faster editing any rule set with multiple declarations should be split to separate lines the key factor here is error detection e g a css validator stating you have a syntax error on line 183 with a single declaration there s no missing it with multiple declarations separate lines is a must for your sanity single declarations on one line span1 width 60px span2 width 140px span3 width 220px multiple declarations one per line sprite display inline block width 16px height 15px background image url img sprite png icon background position 0 0 icon home background position 0 20px icon account background position 0 40px shorthand notation limit shorthand declaration usage to instances where you must explicitly set all available values frequently overused shorthand properties include padding margin font background border border radius usually we don t need to set all the values a shorthand property represents for example html headings only set top and bottom margin so when necessary only override those two values a 0 value implies an override of either a browser default or previously specified value excessive use of shorthand properties leads to sloppier code with unnecessary overrides and unintended side effects the mozilla developer network has a great article on shorthand properties for those unfamiliar with notation and behavior bad example element margin 0 0 10px background red background url image jpg border radius 3px 3px 0 0 good example element margin bottom 10px background color red background image url image jpg border top left radius 3px border top right radius 3px nesting in preprocessors avoid unnecessary nesting in preprocessors whenever possible keep it simple and avoid reverse nesting consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested additional reading nesting in sass and less without nesting table thead tr th table thead tr td with nesting table thead tr th td operators in preprocessors for improved readability wrap all math operations in parentheses with a single space between values variables and operators bad example element margin 10px 0 variable 2 10px good example element margin 10px 0 variable 2 10px comments code is written and maintained by people ensure your code is descriptive well commented and approachable by others great code comments convey context or purpose do not simply reiterate a component or class name use the syntax when writing css with preprocessors when shipping css to production remove all comments be sure to write in complete sentences for larger comments and succinct phrases for general notes bad example modal header modal header good example wrapping element for modal title and modal close modal header class names keep classes lowercase and use dashes not underscores or camelcase dashes serve as natural breaks in related class e g btn and btn danger avoid excessive and arbitrary shorthand notation btn is useful for button but s doesn t mean anything keep classes as short and succinct as possible use meaningful names use structural or purposeful names over presentational prefix classes based on the closest parent or base class use js classes to denote behavior as opposed to style but keep these classes out of your css it s also useful to apply many of these same rules when creating custom properties and preprocessor variable names bad example t red header good example tweet important tweet header selectors use classes over generic element tags for more explicit and reliable styling that isn t dependent on your markup avoid using several attribute selectors e g class on commonly occuring components browser performance is known to be impacted by these keep selectors short and strive to limit the number of elements in each selector to three scope classes to the closest parent only when necessary e g when not using prefixed classes additional reading scope css classes with prefixes stop the cascade bad example span page container stream stream item tweet tweet header username avatar good example avatar tweet header username tweet avatar child and descendant selectors when necessary it may be helpful to use the child combinator to limit the cascade of some styles in elements like table s that are often recursively nested use it to limit styles to the immediate children elements of a parent ele...