Table of Contents

80 Characteres Wide

Titling

O titulo da seção é prefixado com #, para nos permitir fazer buscas mais específicas

Para quem não modulariza

Padrões em cada declaração de propriedade

.baz {
    display: block;
    background-color: green;
    cor: vermelho;
}

Não fuja dos padrões

.icon - casa {background-position: 0 0; }
.icon - pessoa {background-position: -16px 0; }
.icon - arquivos {background-position: 0 -16px; }
.icon - configurações {background-position: -16px -16px; }

.foo, .foo - bar, .baz
{
	display: block;
	background-color: green;
	color: red}

Recuo

Usando algum pre-processador

Ainda no recuo

Recuo incorreto

Nomeclaturas de classes

• Oque sua classe faz
• Onde uma classe pode ser usada
• Com qual classe ela pode ser combinada (.btn .btn-block)

Hífen delimitado

Não use camel case, nem "_"

Evite usar seletores html

#header h1, #section h1 {
    color: red;
}

reutilize

.title {
    color: red;
}

Não combine o seletores html com classes

body.home div.header ul {}

Performance também é importante

.list {
    color: red;
}

Shit!

.class-0.class-1.class-2.class-3.class-4.class-5.class-6.class-7.class-8.class-9.class-10.class-11.class-12.class-13.class-14.class-15.class-16.class-17.class-18.class-19.class-20.class-21.class-22.class-23.class-24.class-25.class-26.class-27.class-28.class-29.class-30.class-31.class-32.class-33.class-34.class-35.class-36.class-37.class-38.class-39.class-40.class-41.class-42.class-43.class-44.class-45.class-46.class-47.class-48.class-49.class-50.class-51.class-52.class-53.class-54.class-55.class-56.class-57.class-58.class-59.class-60.class-61.class-62.class-63.class-64.class-65.class-66.class-67.class-68.class-69.class-70.class-71.class-72.class-73.class-74.class-75.class-76.class-77.class-78.class-79.class-80.class-81.class-82.class-83.class-84.class-85.class-86.class-87.class-88.class-89.class-90.class-91.class-92.class-93.class-94.class-95.class-96.class-97.class-98.class-99.class-100.class-101.class-102.class-103.class-104.class-105.class-106.class-107.class-108.class-109.class-110.class-111.class-112.class-113.class-114.class-115.class-116.class-117.class-118.class-119.class-120.class-121.class-122.class-123.class-124.class-125.class-126.class-127.class-128.class-129.class-130.class-131.class-132.class-133.class-134.class-135.class-136.class-137.class-138.class-139.class-140.class-141.class-142.class-143.class-144.class-145.class-146.class-147.class-148.class-149.class-150.class-151.class-152.class-153.class-154.class-155.class-156.class-157.class-158.class-159.class-160.class-161.class-162.class-163.class-164.class-165.class-166.class-167.class-168.class-169.class-170.class-171.class-172.class-173.class-174.class-175.class-176.class-177.class-178.class-179.class-180.class-181.class-182.class-183.class-184.class-185.class-186.class-187.class-188.class-189.class-190.class-191.class-192.class-193.class-194.class-195.class-196.class-197.class-198.class-199.class-200.class-201.class-202.class-203.class-204.class-205.class-206.class-207.class-208.class-209.class-210.class-211.class-212.class-213.class-214.class-215.class-216.class-217.class-218.class-219.class-220.class-221.class-222.class-223.class-224.class-225.class-226.class-227.class-228.class-229.class-230.class-231.class-232.class-233.class-234.class-235.class-236.class-237.class-238.class-239.class-240.class-241.class-242.class-243.class-244.class-245.class-246.class-247.class-248.class-249.class-250.class-251.class-252.class-253.class-254.class-255.class-256.class-257.class-258.class-259.class-260.class-261.class-262.class-263.class-264.class-265.class-266.class-267.class-268.class-269.class-270.class-271.class-272.class-273.class-274.class-275.class-276.class-277.class-278.class-279.class-280.class-281.class-282.class-283.class-284.class-285.class-286.class-287.class-288.class-289.class-290.class-291.class-292.class-293.class-294.class-295.class-296.class-297.class-298.class-299.class-300.class-301.class-302.class-303.class-304.class-305.class-306.class-307.class-308.class-309.class-310.class-311.class-312.class-313.class-314.class-315.class-316.class-317.class-318.class-319.class-320.class-321.class-322.class-323.class-324.class-325.class-326.class-327.class-328.class-329.class-330.class-331.class-332.class-333.class-334.class-335.class-336.class-337.class-338.class-339.class-340.class-341.class-342.class-343.class-344.class-345.class-346.class-347.class-348.class-349.class-350.class-351.class-352.class-353.class-354.class-355.class-356.class-357.class-358.class-359.class-360.class-361.class-362.class-363.class-364.class-365.class-366.class-367.class-368.class-369.class-370.class-371.class-372.class-373.class-374.class-375.class-376.class-377.class-378.class-379.class-380.class-381.class-382.class-383.class-384.class-385.class-386.class-387.class-388.class-389.class-390.class-391.class-392.class-393.class-394.class-395.class-396.class-397.class-398.class-399.class-400.class-401.class-402.class-403.class-404.class-405.class-406.class-407.class-408.class-409.class-410.class-411.class-412.class-413.class-414.class-415.class-416.class-417.class-418.class-419.class-420.class-421.class-422.class-423.class-424.class-425.class-426.class-427.class-428.class-429.class-430.class-431.class-432.class-433.class-434.class-435.class-436.class-437.class-438.class-439.class-440.class-441.class-442.class-443.class-444.class-445.class-446.class-447.class-448.class-449.class-450.class-451.class-452.class-453.class-454.class-455.class-456.class-457.class-458.class-459.class-460.class-461.class-462.class-463.class-464.class-465.class-466.class-467.class-468.class-469.class-470.class-471.class-472.class-473.class-474.class-475.class-476.class-477.class-478.class-479.class-480.class-481.class-482.class-483.class-484.class-485.class-486.class-487.class-488.class-489.class-490.class-491.class-492.class-493.class-494.class-495.class-496.class-497.class-498.class-499.class-500.class-501.class-502.class-503.class-504.class-505.class-506.class-507.class-508.class-509.class-510.class-511.class-512.class-513.class-514.class-515.class-516.class-517.class-518.class-519.class-520.class-521.class-522.class-523.class-524.class-525.class-526.class-527.class-528.class-529.class-530.class-531.class-532.class-533.class-534.class-535.class-536.class-537.class-538.class-539.class-540.class-541.class-542.class-543.class-544.class-545.class-546.class-547.class-548.class-549.class-550.class-551.class-552.class-553.class-554.class-555.class-556.class-557.class-558.class-559.class-560.class-561.class-562.class-563.class-564.class-565.class-566.class-567.class-568.class-569.class-570.class-571.class-572.class-573.class-574.class-575.class-576.class-577.class-578.class-579.class-580.class-581.class-582.class-583.class-584.class-585.class-586.class-587.class-588.class-589.class-590.class-591.class-592.class-593.class-594.class-595.class-596.class-597.class-598.class-599.class-600.class-601.class-602.class-603.class-604.class-605.class-606.class-607.class-608.class-609.class-610.class-611.class-612.class-613.class-614.class-615.class-616.class-617.class-618.class-619.class-620.class-621.class-622.class-623.class-624.class-625.class-626.class-627.class-628.class-629.class-630.class-631.class-632.class-633.class-634.class-635.class-636.class-637.class-638.class-639.class-640.class-641.class-642.class-643.class-644.class-645.class-646.class-647.class-648.class-649.class-650.class-651.class-652.class-653.class-654.class-655.class-656.class-657.class-658.class-659.class-660.class-661.class-662.class-663.class-664.class-665.class-666.class-667.class-668.class-669.class-670.class-671.class-672.class-673.class-674.class-675.class-676.class-677.class-678.class-679.class-680.class-681.class-682.class-683.class-684.class-685.class-686.class-687.class-688.class-689.class-690.class-691.class-692.class-693.class-694.class-695.class-696.class-697.class-698.class-699.class-700.class-701.class-702.class-703.class-704.class-705.class-706.class-707.class-708.class-709.class-710.class-711.class-712.class-713.class-714.class-715.class-716.class-717.class-718.class-719.class-720.class-721.class-722.class-723.class-724.class-725.class-726.class-727.class-728.class-729.class-730.class-731.class-732.class-733.class-734.class-735.class-736.class-737.class-738.class-739.class-740.class-741.class-742.class-743.class-744.class-745.class-746.class-747.class-748.class-749.class-750.class-751.class-752.class-753.class-754.class-755.class-756.class-757.class-758.class-759.class-760.class-761.class-762.class-763.class-764.class-765.class-766.class-767.class-768.class-769.class-770.class-771.class-772.class-773.class-774.class-775.class-776.class-777.class-778.class-779.class-780.class-781.class-782.class-783.class-784.class-785.class-786.class-787.class-788.class-789.class-790.class-791.class-792.class-793.class-794.class-795.class-796.class-797.class-798.class-799.class-800.class-801.class-802.class-803.class-804.class-805.class-806.class-807.class-808.class-809.class-810.class-811.class-812.class-813.class-814.class-815.class-816.class-817.class-818.class-819.class-820.class-821.class-822.class-823.class-824.class-825.class-826.class-827.class-828.class-829.class-830.class-831.class-832.class-833.class-834.class-835.class-836.class-837.class-838.class-839.class-840.class-841.class-842.class-843.class-844.class-845.class-846.class-847.class-848.class-849.class-850.class-851.class-852.class-853.class-854.class-855.class-856.class-857.class-858.class-859.class-860.class-861.class-862.class-863.class-864.class-865.class-866.class-867.class-868.class-869.class-870.class-871.class-872.class-873.class-874.class-875.class-876.class-877.class-878.class-879.class-880.class-881.class-882.class-883.class-884.class-885.class-886.class-887.class-888.class-889.class-890.class-891.class-892.class-893.class-894.class-895.class-896.class-897.class-898.class-899.class-900.class-901.class-902.class-903.class-904.class-905.class-906.class-907.class-908.class-909.class-910.class-911.class-912.class-913.class-914.class-915.class-916.class-917.class-918.class-919.class-920.class-921.class-922.class-923.class-924.class-925.class-926.class-927.class-928.class-929.class-930.class-931.class-932.class-933.class-934.class-935.class-936.class-937.class-938.class-939.class-940.class-941.class-942.class-943.class-944.class-945.class-946.class-947.class-948.class-949.class-950.class-951.class-952.class-953.class-954.class-955.class-956.class-957.class-958.class-959.class-960.class-961.class-962.class-963.class-964.class-965.class-966.class-967.class-968.class-969.class-970.class-971.class-972.class-973.class-974.class-975.class-976.class-977.class-978.class-979.class-980.class-981.class-982.class-983.class-984.class-985.class-986.class-987.class-988.class-989.class-990.class-991.class-992.class-993.class-994.class-995.class-996.class-997.class-998.class-999 {
  color: blue;
}


.one, .tho, .tree, .four {
    color: black;
}

Good!

.dark {
    color: black;
}

.positive {
    color: blue;
}

MAS SOU FREELA NÃO TENHO O PORQUE DE USAR

Voltamos as vantagens

Desenvolvimento ágil = Ganho de tempo

Ganho de tempo = Dinheiro