{"id":16347404,"url":"https://github.com/cuth/title-css","last_synced_at":"2025-03-23T00:32:51.876Z","repository":{"id":14446615,"uuid":"17158191","full_name":"cuth/Title-CSS","owner":"cuth","description":"A CSS organization methodology","archived":false,"fork":false,"pushed_at":"2014-06-03T13:11:00.000Z","size":196,"stargazers_count":33,"open_issues_count":0,"forks_count":1,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-18T16:04:04.280Z","etag":null,"topics":["css","methodology"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"appcelerator/titanium_mobile","license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cuth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-25T02:10:20.000Z","updated_at":"2024-10-07T09:49:01.000Z","dependencies_parsed_at":"2022-08-31T09:10:50.979Z","dependency_job_id":null,"html_url":"https://github.com/cuth/Title-CSS","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2FTitle-CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2FTitle-CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2FTitle-CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cuth%2FTitle-CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cuth","download_url":"https://codeload.github.com/cuth/Title-CSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245040235,"owners_count":20551297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","methodology"],"created_at":"2024-10-11T00:42:08.105Z","updated_at":"2025-03-23T00:32:51.538Z","avatar_url":"https://github.com/cuth.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Title CSS\n=========\n\nTitle CSS is an organizational technique geared to help you write beautiful and maintainable CSS. Similar to [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/), Title CSS aims to make CSS more readable by giving visual cues.\n\nThe trick to Title CSS is simple. For any global CSS class use a title case name (uppercase the first letter). For any modifiers or descendant class begin the class with a lowercase letter.\n\nHere is an example of the markup:\n```html\n\u003cdiv class=\"Title modifier\"\u003e\n    \u003cp class=\"descendant\"\u003e...\n\u003c/div\u003e\n```\n\nHere is how you would target these elements in CSS:\n```css\n.Title {}\n    .Title.modifier {}\n    .Title .descendant {}\n```\n\nThis is why it works\n--------------------\nBlock identifiers or \"Title\" classes create a scope for all the descendant classes within the block. Descendant classes can be repeated in other Title blocks without style collision.\n\nHTML class names are *case-sensitive*. This is mentioned in the [HTML4 spec](http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2). L. David Baron of Mozilla interprets the CSS and HTML specs [here](http://dbaron.org/css/test/casesens).\n\n\u003e Still not convinced? Try any browser since Netscape 6. Still afraid of utilizing case-sensitivity? Just make a rule not to reuse Title classes as a lowercase descendant class.\n\nEnjoy the benefits of BEM CSS such as the block style grouping of elements and the security of keeping selectors from interfering with each other.\n\nHow does it help?\n-----------------\n* Write CSS classes in a more natural manner.\n* CSS selectors resemble the written language since sentences start with an uppercase letter.\n* Shorter class names are faster to type and easier to scan.\n* Title case classes are easy to spot in the markup. To see what a lowercase descendant class belongs to, just traverse up the nodes for a Title class.\n\nPitfall and workaround\n------------------------\nTitle CSS may have issues when you use a Title block to contain other Title blocks. If a containing Title block has the same descendant selector class as one that it envelopes than there will be a conflict, in which case you should use [child selectors](http://www.w3.org/TR/CSS21/selector.html#child-selectors) in Title blocks that act as containers.\n\nTo demonstrate the issue:\n```html\n\u003cdiv class=\"Container\"\u003e\n    \u003cheader class=\"header\"\u003e...\u003c/header\u003e\n    \u003cmain class=\"body\"\u003e\n        \u003csection class=\"Title\"\u003e\n            \u003cdiv class=\"header\"\u003e...\u003c/div\u003e\n            \u003cdiv class=\"body\"\u003e...\u003c/div\u003e\n        \u003c/section\u003e\n        \u003csection class=\"Title\"\u003e\n            \u003cdiv class=\"header\"\u003e...\u003c/div\u003e\n            \u003cdiv class=\"body\"\u003e...\u003c/div\u003e\n        \u003c/section\u003e\n    \u003c/main\u003e\n\u003c/div\u003e\n```\n```css\n.Container {}\n    .Container .header {}\n    .Container .body {}\n.Title {}\n    .Title .header {}\n    .Title .body {}\n```\n\nThe solution:\n```css\n.Container {}\n    .Container \u003e .header {}\n    .Container \u003e .body {}\n```\n\nTerminology\n-----------\n\n*Examples are in SCSS*\n\n### Modules\nA module is the grouping of related CSS selectors that make up a block. Each selector in a module begins with a Title class. Modules are described in more detail in [SMACSS](http://smacss.com/).\n\n```scss\n.Module {\n    \u003e .relatedChild {}\n    .relatedDescendant {}\n}\n```\n\n### Title Classes\nA title class is the capitalized class that creates the scope for any descendant classes in a module.\n\n```scss\n.TitleClass {\n    .scopedElement {}\n}\n```\n\n### Modifiers\nA modifier is a class that can be applied to another class to change the state of that class. Modifiers are usually appended to title classes even if they only affect descendant elements in the module. Title CSS is about making selectors readable so begin modifiers with \"is\" or a short preposition.\n\n```html\n\u003cdiv class=\"Slider isEnabled\"\u003e...\u003c/div\u003e\n\u003cul class=\"List of5\"\u003e...\u003c/ul\u003e\n\u003cdiv class=\"Checkout isActive\"\u003e...\u003c/div\u003e\n\u003cul class=\"Group ofProducts\"\u003e...\u003c/ul\u003e\n```\n\n### Objects ([OOCSS](http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/))\nObjects are capitalized in Title CSS just like title classes because they are both occupying the global CSS name-space. Objects are different from Modules in that they typically don't have descendants and they are usually combined with other classes. To distinguish objects from title classes prefix the object class name with an indefinite article such as \"A\" or \"Un\".\n\n```html\n\u003cdiv class=\"Profile\"\u003e\n    \u003cfigure class=\"image UnaMedia\"\u003e...\u003c/figure\u003e\n\u003c/div\u003e\n\u003ch1 class=\"ATitle\"\u003e...\u003c/h1\u003e\n```\n\n### Singleton\nA singleton is a module that will only be used once. Since Title CSS only names classes and doesn't use ID's for CSS selectors it maybe be beneficial to prefix singletons to distinguish them from other modules or objects. In this case prefixing the class name with definite article such as \"The\", \"El\", \"La\", or \"Le\" would be appropriate.\n\n```html\n\u003cheader class=\"TheHeader\"\u003e...\u003c/header\u003e\n\u003cfooter class=\"LeFooter\"\u003e...\u003c/footer\u003e\n```\n\n### Grouping Title Classes\nTitle classes can show a relationship to others by using the same name as a prefix. This can be beneficial for templates and widgets to even pollute the global name-space less. Modules should only show this relationship when their existence depends on each other. Grouping can help break up a large module into smaller, more managable, modules.\n\n```html\n\u003cdiv class=\"LargeModule\"\u003e\n    \u003cdiv class=\"LargeModule-section\"\u003e...\u003c/div\u003e\n    \u003cdiv class=\"LargeModule-area\"\u003e...\u003c/div\u003e\n\u003c/div\u003e\n```\n\nPerformance\n-----------\nTitle CSS does not help you write the most performant selectors. The issue is that browsers typically read selectors from right to left. If there are commonly used classes or elements at the end of the selectors then the browser will most likely have to do more work to read through the styles. Best practice is to keep the descendant selectors as shallow as possible.\n\nHave a look at this example that can improve performance as well as maintainability:\n```css\n.Title .withToo .many .selectors {}\n```\n```css\n.Title .selectors {}\n```\n\nSCSS and other pre-processor syntaxes\n-------------------------------------\nSass is an excellent tool to help write Title CSS. With the nesting ability found in pre-processing languages, it is easy to identify new Title blocks in the stylesheet.\n\n```scss\n.Title {\n    \u0026.modifier {}\n\n    .descendant {}\n\n    \u003e .tightlyBound {}\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Ftitle-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcuth%2Ftitle-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcuth%2Ftitle-css/lists"}