├── .eleventy.js
├── .github
└── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── _11ty
└── filters.js
├── _data
└── site.json
├── _includes
└── layouts
│ ├── base.liquid
│ └── post.liquid
├── about.md
├── contribute.md
├── index.njk
├── package-lock.json
├── package.json
├── plugins
└── sass
│ ├── index.js
│ └── manifest.yml
├── posts
├── content-is-your-content.md
├── convenient-css-naming-conventions.md
├── font-everywhere.md
├── font-variation-misfortune.md
├── lets-talk-about-units.md
├── link-and-the-forgotten-accessibility.md
├── one-size-should-fit-all.md
├── overspecified-specificity.md
├── posts.json
├── prefix-mess.md
├── we-dont-float-down-here-anymore.md
└── z-index-hell.md
├── rss
└── feed.njk
├── sitemap.njk
└── src
├── ads.txt
├── css
├── home.css
├── layout.css
├── main.css
├── normalize.css
├── post.css
└── prism.css
├── images
├── csshell_logo.png
├── csshell_logo.svg
├── favicon-16x16.png
├── favicon-32x32.png
├── pentagram_icon.svg
└── posts
│ └── specificity.svg
├── js
└── prism.js
└── robots.txt
/.eleventy.js:
--------------------------------------------------------------------------------
1 | const filters = require('./_11ty/filters.js');
2 | const pluginRss = require("@11ty/eleventy-plugin-rss");
3 | const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
4 |
5 | module.exports = function (eleventyConfig) {
6 | eleventyConfig.addPassthroughCopy('src/css');
7 | eleventyConfig.addPassthroughCopy('src/images');
8 | eleventyConfig.addPassthroughCopy('src/js');
9 |
10 | eleventyConfig.addPassthroughCopy({ 'src/ads.txt': '/ads.txt' });
11 | eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' });
12 |
13 | // Filters
14 | Object.keys(filters).forEach(filterName => {
15 | eleventyConfig.addFilter(filterName, filters[filterName])
16 | });
17 |
18 | // Plugins
19 | eleventyConfig.addPlugin(pluginRss);
20 | eleventyConfig.addPlugin(syntaxHighlight);
21 |
22 | return {
23 | passthroughFileCopy: true
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | ko_fi: cat_a_flame
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | _site/
3 | dist/css/
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Stefánia Péter
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # CSS Hell - To Hell with bad CSS!
2 |
3 | Collection of common CSS mistakes, and how to fix them.
4 |
5 | https://csshell.dev
6 |
7 | ## What is this all about?
8 |
9 | Hi, I'm Stefánia, working with web since 2003. During my career I came across many lines of code, solutions, frameworks, mindsets.
10 |
11 | If you have been in this industry for some time, it should not be breaking news that CSS and HTML are those parts of an application
12 | people still underestimate. Because of that, some _interesting_ code pieces are born. I'd like to preserve these lines by showing you the bad
13 | example, explaining what's wrong with it and how to fix it.
14 |
15 | With this, I hope I can help you learn and improve.
16 |
17 | ## Why is it called CSS Hell?
18 |
19 | It's a ~~joke~~ idea I stole from [HTMLHell](https://www.htmhell.dev/). I hope adding some fun and sarcasm to learning might help raising awareness of
20 | how **!important** a good CSS code is.
21 |
22 |
23 | ## Got an issue, an idea?
24 |
25 | Please report it on [GitHub](https://github.com/cat-a-flame/CSSHell)!
26 |
27 |
28 | ## Would you like to support my work?
29 |
30 | CSS Hell is made with love and a lots of coffee. If you wish to buy me one, you can do it on [Ko-fi](https://ko-fi.com/cat_a_flame) ❤️
31 |
32 |
33 | ## Credits
34 |
35 | The logo's font is [Chomsky](https://github.com/ctrlcctrlv/chomsky) by [Fredrick Brennan](https://github.com/ctrlcctrlv).
36 |
37 | The site is using [Eleventy](https://www.11ty.dev/).
38 |
--------------------------------------------------------------------------------
/_11ty/filters.js:
--------------------------------------------------------------------------------
1 | const beautify_css = require('js-beautify').css;
2 | const beautify_html = require('js-beautify').html;
3 | const MarkdownIt = require('markdown-it');
4 |
5 | module.exports = {
6 | prettyCSS: value => {
7 | return beautify_css(value, {
8 | "indent_size": 2
9 | })
10 | },
11 | pretty: value => {
12 | return beautify_html(value, {
13 | "indent_size": 2,
14 | "inline": "",
15 | "wrap_line_length": "70"
16 | })
17 | },
18 | md: value => {
19 | const md = new MarkdownIt();
20 | return md.render(value);
21 | }
22 | }
--------------------------------------------------------------------------------
/_data/site.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "CSS Hell",
3 | "url": "https://csshell.dev"
4 | }
--------------------------------------------------------------------------------
/_includes/layouts/base.liquid:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | {% if pageTitle %}{{pageTitle}} | {%endif%} CSS Hell
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 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
54 |
55 |
12 |
13 | {{ content }}
14 |
15 |
16 |
--------------------------------------------------------------------------------
/about.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/base.liquid
3 | ---
4 |
5 | ## What is this all about?
6 |
7 | Hi, I'm Stefánia, working with web since 2003. During my career I came across many lines of code, solutions, frameworks, mindsets.
8 |
9 | If you have been in this industry for some time, it should not be breaking news that CSS and HTML are those parts of an application
10 | people still underestimate. Because of that, some _interesting_ code pieces are born. I'd like to preserve these lines by showing you the bad
11 | example, explaining what's wrong with it and how to fix it.
12 |
13 | With this, I hope I can help you learn and improve.
14 |
15 |
16 | ### Side note
17 |
18 | All of my examples are from real websites in production. Since I don't want to hurt anyone, I change the class names for harder identification.
19 |
20 | ## Why is it called CSS Hell?
21 |
22 | It's a ~~joke~~ idea I stole from [HTMHell](https://www.htmhell.dev/). I hope adding some fun and sarcasm to learning might help raising awareness of
23 | how **!important** a good CSS code is.
24 |
25 |
26 | ## Got an issue, an idea?
27 |
28 | Please report it on [GitHub](https://github.com/cat-a-flame/CSSHell)!
29 |
30 |
31 | ## Would you like to support my work?
32 |
33 | CSS Hell is made with love and a lots of coffee. If you wish to buy me one, you can do it on [Ko-fi](https://ko-fi.com/cat_a_flame) ❤️
--------------------------------------------------------------------------------
/contribute.md:
--------------------------------------------------------------------------------
1 | ---
2 | pageTitle: Contribute
3 | layout: layouts/base.liquid
4 | ---
5 |
6 |
{{ pageTitle }}
7 |
8 | Did you encounter a hellish CSS code that's worth preserving for the eternity? Go ahead and share it!
9 |
10 | ## Rules
11 |
12 | - All examples are must be copied from websites found in production.
13 | - Remove irrelevant parts of the code.
14 | - Modify the code (class names) for harder identification, we don't want to publicly shame anyone.
15 | - CSS code examples must be copied from new, modern websites, ones made years ago doesn't count.
16 |
17 | ## How to contribute
18 |
19 | 1. [Fork the CSSHell repository](https://github.com/cat-a-flame/CSSHell) and install the dependencies.
20 |
21 | ```html
22 | npm install
23 | ```
24 |
25 | 2. Run the project:
26 |
27 | ```html
28 | eleventy --serve
29 | ```
30 |
31 |
32 | 3. Add a submission in ./posts folder by copying any other markdown file. The file name must match with the title of the post!
33 |
34 | - Show the bad example
35 | - Explain how to fix it
36 | - Show the good example
37 | - Add resources for further reading
38 |
39 | 4. Push and create a pull request to CSSHell's `main` branch.
40 |
41 | If you got any questions, or not sure if your example worth sharing, feel free to DM me on [Twitter](https://twitter.com/cat_a_flame), or post at [GitHub Discussions](https://github.com/cat-a-flame/CSSHell/discussions).
42 |
43 |
44 | ## !important
45 |
46 | At the moment, the author link points to Twitter. I'm planning to change this and add GitHub and LinkedIn as an option.
--------------------------------------------------------------------------------
/index.njk:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/base.liquid
3 | pageTitle: To Hell with bad CSS!
4 | pagination:
5 | data: collections.posts
6 | size: 5
7 | alias: entries
8 | reverse: true
9 | ---
10 |
11 |
12 | {% for post in entries %}
13 |
28 |
29 | ## What is the problem and how to fix it
30 |
31 | - Accessibility: CSS content is not accessible to screen readers, which makes it difficult for users with visual impairments to access the content. Also, you can not select it because it doesn't behave as a text.
32 | - SEO: Search engines may not be able to read CSS content, which means that the content will not be indexed or displayed in search results.
33 | - Maintenance: If you need to update or change the content, you will have to go through the CSS file instead of the HTML file, which can be time-consuming and error-prone.
34 | - Structure: CSS content does not follow the semantic structure of HTML, which makes it difficult to maintain a consistent document structure and can lead to accessibility issues.
35 | - Styling: CSS content is limited in terms of styling options compared to HTML text. This can limit the design options for the webpage. If the user disables the stylesheet, the text won't be visible.
36 | - Separation of concerns: CSS content blurs the separation of concerns between HTML and CSS, which can make it more difficult to maintain and update the code.
37 |
38 | If you need to display any kind of text, always do it in the HTML code. `::before` and `::after` pseudo-elements are best used for decorative purposes. However, in print view, it is a good idea for using it to display URLs. If you happen to print an article or documentation, it can come in handy to make the link visible behind the keyword. Go on, check out the print preview of this post!
39 |
52 |
53 | ## Resources
54 | - [MDN CSS content](https://developer.mozilla.org/en-US/docs/Web/CSS/content)
55 | - [Accessibility support for CSS generated content](https://tink.uk/accessibility-support-for-css-generated-content/)
56 | - [How is CSS pseudo content treated by screen readers?](https://accessibleweb.com/question-answer/how-is-css-pseudo-content-treated-by-screen-readers/)
57 |
58 |
--------------------------------------------------------------------------------
/posts/convenient-css-naming-conventions.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2021-06-05T14:45:00
5 | pageTitle: Convenient CSS naming conventions
6 | lead: "I often run into the problem where I see the same class name being reused on different parts and context of the website, but when 1 out of the 3 properties don't match with the design, developers just use inline styling to override the desired rule."
7 | badcode: '.primary-text { color: #000; font-family: "Open Sans"; line-height: 1.2; }'
8 | badcode2: '
9 |
40 |
41 | ## What is the problem and how to fix it
42 |
43 | - Using inline styling leads to hard maintenance and code readability. The best way is to separate the view, styling and JavaScript from each other.
44 | - Class names should reflect what are they styling, like, in my example, you can tell from the CSS that the `.heading-main` is styling the main heading.
45 | - If you work on a website with more people and don't have a naming convention, it has a risk of creating a class with the same name, and that can cause conflicts on the design, most likely if you are working with reuseable components (the most common class name I often see is `.title`).
46 | - There are several methodologies for naming. The most popular one is [BEM](http://getbem.com/), but you can choose by your liking or just come up with a new one which suits the project. The most important is to follow the naming convention all the time.
47 |
48 |
66 |
67 | ## Resources
68 | - [CSS Naming Conventions that Will Save You Hours of Debugging](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/)
69 | - [Naming Things in CSS](https://elad.medium.com/naming-things-in-css-a7de9ad31cd9)
70 |
71 |
--------------------------------------------------------------------------------
/posts/font-everywhere.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2021-04-18T18:44:00
5 | pageTitle: 'font-family everywhere!'
6 | lead: "Specifying the primary font for almost every selector is not a good approach, yet I often run into this issue."
7 | badcode: '.my-class-1 {font-family: Roboto;} .my-class-2 {font-family: Roboto;} p {font-family: Roboto;} .my-class-3 {font-family: Roboto;} footer {font-family: Roboto;}'
8 | goodcode: 'body {font-family: "Roboto", sans-serif;}'
9 | goodcode2: ':root {--heading-font-family: "Georgia", "Times New Roman", "Times", serif;} .title {font-family: var(--heading-font-family);}'
10 | ---
11 |
12 |
24 |
25 | ## What is the problem and how to fix it
26 |
27 | - Duplicating the `font-family` import only leads to hard maintainability. If, for some reason you want to change your website's font, you have to do it in every line, or, in all files.
28 | - If you add the font name by hand, there is a high chance you mistype it once and the browser will load a totally different font (once I saw Ariel instead of Arial...).
29 | - Quotation is not necessary, but it's a good approach to use it, mostly when the font name contains whitespaces.
30 | - Always add a fallback option. If `Roboto` isn't available, then the user-agent-defined sans serif font will be used. Note, these are not font names, so don't use quotation marks!
31 | - If you want to use a different kind of font for your headings, links, whatever, the best approach it to store the name as a CSS variable.
32 |
17 |
18 | {{ lead }}
19 |
20 | ## Bad example
21 |
22 | ```css
23 | {{ badcode | prettyCSS | safe }}
24 | ```
25 |
26 | ```html
27 | {{ htmlcode | pretty | safe }}
28 | ```
29 |
30 | What do you think, will it be both _italic_ and __bold__? Hint: it won't.
31 |
32 |
33 |
34 |
35 |
36 | ## What is the problem and how to fix it
37 |
38 | - `font-variation-settings` do not add up, so, when several rules overlap, they override one another.
39 | - Common workaround for that is [using CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#notes), but you really don't want to get in that mess just to define font-weight in a fancy way, don't you?
40 | - Redefining `font-weight`, `font-stretch` or `font-style` in this manner does nothing at all, variable fonts can handle these properties without axes modifications.
41 |
42 | Latter is even [mentioned in spec](https://www.w3.org/TR/css-fonts-4/#font-variation-settings-def):
43 | > When possible, authors should generally use […] this property for special cases where its use is the only way of accessing a particular infrequently used font variation. For example, it is preferable to use `font-weight: 700` rather than `font-variation-settings: 'wght' 700`.
44 |
45 |
46 |
47 |
48 | ## Good example
49 |
50 | Just use font properties:
51 |
52 | ```css
53 | {{ goodcode | prettyCSS | safe }}
54 | ```
55 |
22 |
23 | ## What is the problem and how to fix it
24 |
25 | - Using relative units ensures that the website scales proportionally according to your choice of font, and according to the users' choice of screen size and zoom level.
26 | - The formula to calculate the rem value is `desired-size / root-font-size`, in short `8 / 16 = 0.5`, this means that `1rem` equals the font size of the `html` element (which for most browsers has a default value of 16px).
27 | - If you don't want to grab a calculator every time you need a new unit, use Sass and create mixin. CSS Tricks has a [pretty good article](https://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/) about how you can achive this.
28 |
29 |
41 |
42 | ## Resources
43 | - [CSS Units: Which Ones To Use And Avoid](https://medium.com/swlh/css-units-which-ones-to-use-and-avoid-31e4ed461f9)
44 | - [CSS values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
45 | - [Building Resizeable Components with Relative CSS Units ](https://css-tricks.com/building-resizeable-components-relative-css-units/)
46 |
--------------------------------------------------------------------------------
/posts/link-and-the-forgotten-accessibility.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2021-04-11T20:10:00
5 | pageTitle: 'Link & the forgotten accessibility'
6 | lead: "One of the most common mistakes: setting a color for a link, but not adding `:hover`, `:focus` and `:active` states."
7 | badcode: 'a {color: #ca0000; text-decoration: none;} /* And that is the end of link styling */'
8 | goodcode: 'a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; }'
9 | ---
10 |
11 |
23 |
24 | ## What is the problem and how to fix it
25 |
26 | - Without the missing states, our link won't be accessible, users might get confused while navigating through our website with a mouse or a keyboard,
27 | because they won't be able to identify what is clickable and what is not
28 | - By default, browsers set `text-decoration: underline;` to links, but removing this property can also lead to confusion
29 | - Try using a color which fits with your design but still makes it obvious if a text can be clicked. In this blog, the red color is consistent for clickable items
30 |
31 |
32 |
33 |
34 | Try navigating on this page by pressing the Tab key and see what happens!
35 |
52 |
--------------------------------------------------------------------------------
/posts/one-size-should-fit-all.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2022-06-18T15:15:00
5 | pageTitle: One size should fit all?
6 | lead: "In modern web development, there is less and less reason to use fix sizing for an element, especially when it's a content wrapper."
7 | badcode: ".wrapper { height: 800px; width: 1024px; }"
8 | goodcode: ".wrapper { max-width: 1024px; }"
9 | ---
10 |
11 |
22 |
23 | ## What is the problem and how to fix it
24 |
25 | - There are cases when you need to set the size of an element, but even if you want an image to be 600px wide, that will overflow from the content on mobile.
26 | - Specifying fixed sizes to elements can break the responsiveness. You shouldn't set a size for a `div` unless it's necessary, because you can't cover every possible screen size in your media queries. For example, if the `.wrapper` has a longer content than 800px, everything will overflow.
27 | - Try using `max-width`. That way, you can ensure that your element won't take up the whole area, or sticking out on smaller screens (`max-width` better used on block elements).
28 | - `height` is rarely needed in this case. Let the size of the content decide the height, don't force it!
29 |
24 |
25 | ## What is the problem and how to fix it
26 |
27 | - Overspecifing rules will lead to hard maintainability and code readability, while there is no real benefit.
28 | - If we want to reuse our code, avoid using IDs for styling: as the name indicates, these are unique identifiers, they cannot be repeated within a page. If you need help with naming selectors and avoid styling conflicts, try using [BEM](http://getbem.com/) or other similar naming methodologies.
29 |
30 | CSS stands for _Cascading Style Sheets_, which means, if you apply different color for a text several times in your CSS with the same specificity, the selector which is further down in the source will apply. For example, in the code below, the font color is going to be black:
31 |
32 | ```css
33 | {{ example | prettyCSS | safe }}
34 | ```
35 |
36 | ### How to calculate specificity
37 |
38 | 
39 |
40 | - If the element has inline styling, that automatically wins (1,0,0,0 points)
41 | - For each ID value, apply 0,1,0,0 points
42 | - For each class value, pseudo-class or attribute selector, apply 0,0,1,0 points
43 | - For each element reference, apply 0,0,0,1 point
44 |
45 | You can generally read the values as if they were just a number like 1,0,0,0 is "1000", and so clearly wins over a specificity of 0,1,0,0 or "100". The commas are there to remind us that this isn't really a "base 10" system, in that you could technically have a specificity value of like 0,1,13,4 – and that "13" doesn't spill over as a base 10 system would.
46 |
47 | The `!important` value appended to a CSS property value is an automatic win, it overrides even inline styles from the markup. The only way an `!important` value can be overridden is with another `!important` rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.
48 |
49 | CSS Specificity is one of the most difficult concepts to grasp in Cascading Style Sheets. I strongly recommend reading all the resources I mention above because once you master this knowledge, it's going to be easy to apply it like setting `!important` to every line 😉
50 |
63 |
64 | ## Resources
65 | - [Specificity on w3.org](https://www.w3.org/TR/selectors-3/#specificity)
66 | - [Specificity on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
67 | - [Specifics on CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/)
68 | - [CSS Specificity: Things You Should Know](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/)
69 | - [Specificity Calculator](https://specificity.keegan.st/)
70 |
71 |
--------------------------------------------------------------------------------
/posts/posts.json:
--------------------------------------------------------------------------------
1 | {
2 | "layout": "base.liquid",
3 | "tags": ["posts"]
4 | }
--------------------------------------------------------------------------------
/posts/prefix-mess.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2021-04-15T14:50:00
5 | pageTitle: 'Prefix mess'
6 | lead: "Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while — in theory — preventing their experiments from being relied upon and then breaking web developers' code during the standardization process."
7 | badcode: '.my-class {-webkit-transition: left 400ms ease-out; /* older webkit */ -webkit-transition: left 400ms ease-out; -moz-transition: left 400ms ease-out; -ms-transition: left 400ms ease-out; -o-transition: left 400ms ease-out; transition: left 400ms ease-out;}'
8 | goodcode: '.my-class {transition: left 400ms ease-out;}'
9 | ---
10 |
11 |
23 |
24 | ## What is the problem and how to fix it
25 |
26 | - Adding unnecessary prefixes makes your code harder to read and maintain. The file size can also increase for no reason.
27 | - If not sure which property requires a prefix, and which one not, use [caniuse.com](https://caniuse.com). With this tool you can check the overall support for every property, when they plan to leave the prefix (if it has any), and so on.
28 | - If you don't want to mess with prefixes (understandable), you can use [Autoprefixer](https://www.npmjs.com/package/autoprefixer) in your build process, and this part can be covered automatically.
29 | - Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites (Source: MDN).
30 |
49 |
--------------------------------------------------------------------------------
/posts/we-dont-float-down-here-anymore.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2022-02-07T14:50:00
5 | pageTitle: "We don't float down here anymore"
6 | lead: "I just realised I can't tell when was the last time I used the float property. There are so many other ways to align items without any fuss!"
7 | badcode: '.sidebar { float: right; }'
8 | goodcode: '.my-class {transition: left 400ms ease-out;}'
9 | ---
10 |
11 |
12 |
13 | {{ lead }}
14 |
15 | ## Not that bad example
16 |
17 | ```css
18 | {{ badcode | prettyCSS | safe }}
19 | ```
20 |
21 |
22 |
23 | First of all, `float` is not deprecated. Float was misused. Its original purpose was to align images with texts, nothing more. Then, as layouts and designs started to evolve, we used to align site parts as well, but it was always a pain because elements with the float property were actually floating above our content, so we had to clear them, but `clearfix` was actually a hack, and hard to apply.
24 |
25 | Now in 2022, there are several ways to align elements on our webpage and apps. Let's check out what are those:
26 |
27 | ### Margin
28 | I'm pretty certain that you used `margin: 0 auto;` before to center block elements horizontally. This works with `margin-left: auto;` and `margin-right: auto;` too! The downside is that your element needs to have a fixed size, which is less than 100%. Using fixed sizes is not a good practice, I will explain this in another article later!
29 |
30 | ### Flexbox
31 | Aligning elements with [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is really _flexible_. You can not only align them horizontally but vertically too! You can play with the direction, rearrange the item order, etc. Of course, this requires wrapping your desired items into an element with `display: flex;` which can cause a bit long HTML code, but it is worth it.
32 |
33 | ### Grid
34 | [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/) is more complex than Flexbox, and it's used on bigger parts of your website such as the main layout.
35 |
36 | ### Conclusion
37 | Using `float` nowadays is a bit obsolete. I don't say stop using it, but the above-mentioned methods are much easier to use, and a lot more modern. As I said in the beginning, `float` was made to align images, so keep that in mind when you want to align your sidebar to the right!
38 |
39 |
40 |
41 |
42 |
43 | ## Resources
44 | - [Is CSS float deprecated?](https://css-tricks.com/is-css-float-deprecated/)
45 | - [Stop Using Float in CSS - Here Are Your Alternatives](https://blog.shahednasser.com/stop-using-float-in-css-here-are-your-alternatives/)
46 | - [Clearfix: A Lesson in Web Development Evolution](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/)
47 |
48 |
--------------------------------------------------------------------------------
/posts/z-index-hell.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: layouts/post.liquid
3 | author: cat_a_flame
4 | date: 2021-04-11T20:00:00
5 | pageTitle: z-index hell
6 | lead: "`z-index` is something that can measure one's frustration. The amount of digits represent the fact that the developer tried to position the `div` above the content, but failed miserably."
7 | badcode: '.my-class {z-index: 122828282882;}'
8 | goodcode: '.my-class {position: absolute; z-index: 2;}'
9 | ---
10 |
11 |
22 |
23 | ## What is the problem and how to fix it
24 |
25 | - `z-index` can only be used with `absolute`, `fixed`, `relative` or `sticky` `positions`. In my example, this line is missing.
26 | - `z-index` has a maximum value which is **2147483648**, the maximum positive value for a 32-bit signed binary integer in computing (the example has +2 digits).
27 | - If you don't change anything on your content's z-axis value, adding 2 or 3 has the same effect as 100 or 10000. Adding huge numbers can lead to hard maintainability.
28 | - You might not even need `z-index` at all, just push your DOM element a bit further towards your `
` tag, it will be rendered later than the elements in the same layer preceding it, so it can cover them.
29 |
30 |
31 |